{"id":14316,"library":"vuex-class","title":"Vuex Decorators for Vue Class Component","description":"vuex-class offers a set of decorator-based binding helpers designed to integrate Vuex store interactions seamlessly within Vue components built with `vue-class-component`. It provides decorators such as `@State`, `@Getter`, `@Action`, and `@Mutation` that allow developers to map Vuex store properties directly to class properties, significantly reducing boilerplate. The current stable version is `0.3.2`, released in 2019, indicating a project in maintenance mode, primarily supporting Vue 2 and Vuex 3 ecosystems. Its release cadence has been infrequent since 2019, suggesting limited active development but continued stability for its target environment. A key differentiator is its highly declarative syntax for accessing Vuex, moving away from string-based `map` helpers or direct `this.$store` calls, making the component code cleaner and more readable for TypeScript users leveraging decorators. This approach provides strong typing and improved developer experience when combined with `vue-class-component`.","status":"maintenance","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/ktsn/vuex-class","tags":["javascript","vue","vuex","bindings","typescript"],"install":[{"cmd":"npm install vuex-class","lang":"bash","label":"npm"},{"cmd":"yarn add vuex-class","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuex-class","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for Vue applications.","package":"vue","optional":false},{"reason":"Required for Vuex store integration.","package":"vuex","optional":false},{"reason":"Provides the class-style component syntax and decorators.","package":"vue-class-component","optional":false}],"imports":[{"note":"These are named exports for the primary binding decorators, used with TypeScript. Default imports will not work.","wrong":"import State from 'vuex-class'","symbol":"State, Getter, Action, Mutation","correct":"import { State, Getter, Action, Mutation } from 'vuex-class'"},{"note":"Named export used to create helpers for namespaced Vuex modules. While CommonJS `require` syntax might technically resolve, it's not the idiomatic way in modern TypeScript/ESM projects.","wrong":"const namespace = require('vuex-class').namespace","symbol":"namespace","correct":"import { namespace } from 'vuex-class'"}],"quickstart":{"code":"import Vue from 'vue'\nimport Component from 'vue-class-component'\nimport { State, Getter, Action, Mutation, namespace } from 'vuex-class'\n\nconst someModule = namespace('path/to/module')\n\ninterface MyState {\n  foo: string;\n  bar: number;\n}\n\n// Define a mock Vuex store for demonstration\nconst store = new Vuex.Store<MyState>({\n  state: { foo: 'hello', bar: 123 },\n  getters: {\n    foo: (state: MyState) => state.foo.toUpperCase()\n  },\n  mutations: {\n    setFoo(state: MyState, payload: { value: string }) {\n      state.foo = payload.value\n    }\n  },\n  actions: {\n    updateFoo({ commit }, payload: { value: string }) {\n      commit('setFoo', payload)\n    }\n  },\n  modules: {\n    'path/to/module': {\n      namespaced: true,\n      state: { baz: 'module data' },\n      getters: {\n        foo: (state: { baz: string }) => state.baz.toUpperCase()\n      }\n    }\n  }\n})\n\n@Component\nexport class MyComp extends Vue {\n  @State('foo') stateFoo!: string\n  @State((state: MyState) => state.bar) stateBar!: number\n  @Getter('foo') getterFoo!: string\n  @Action('updateFoo') actionFoo!: (payload: { value: string }) => void\n  @Mutation('setFoo') mutationFoo!: (payload: { value: string }) => void\n  @someModule.Getter('foo') moduleGetterFoo!: string\n\n  // If the argument is omitted, use the property name\n  @State foo!: string\n  @Getter bar!: string // Assuming 'bar' getter exists in store\n  @Action baz!: (payload: any) => void // Assuming 'baz' action exists\n  @Mutation qux!: (payload: any) => void // Assuming 'qux' mutation exists\n\n  created () {\n    console.log('stateFoo:', this.stateFoo) // -> store.state.foo\n    console.log('stateBar:', this.stateBar) // -> store.state.bar\n    console.log('getterFoo:', this.getterFoo) // -> store.getters.foo\n    this.actionFoo({ value: 'world' }) // -> store.dispatch('updateFoo', { value: 'world' })\n    this.mutationFoo({ value: 'test' }) // -> store.commit('setFoo', { value: 'test' })\n    console.log('moduleGetterFoo:', this.moduleGetterFoo) // -> store.getters['path/to/module/foo']\n    console.log('Inferred State foo:', this.foo)\n  }\n}\n\n// For the example to be runnable, a Vue instance and store are needed.\nimport Vuex from 'vuex'\nVue.use(Vuex)\n\nnew Vue({\n  store,\n  render: h => h(MyComp)\n}).$mount('#app')\n\n// You would also need an #app element in your HTML\n// <div id=\"app\"></div>","lang":"typescript","description":"This quickstart demonstrates how to use `vuex-class` decorators (`@State`, `@Getter`, `@Action`, `@Mutation`) and the `namespace` helper to bind Vuex store properties to a class-style Vue component, showcasing both explicit and inferred property name mapping for a full interaction example."},"warnings":[{"fix":"Ensure your project's `package.json` specifies peer dependencies within the compatible ranges: `vue: \"^2.5.0\"`, `vuex: \"^3.0.0\"`, and `vue-class-component: \"^6.0.0 || ^7.0.0\"`. Update your `npm` or `yarn` lock files.","message":"`vuex-class` v0.3.0 introduced breaking changes by updating its peer dependencies. It now requires Vue >= 2.5.0, Vuex >= 3.0.0, and vue-class-component >= 6.0.0. Projects using older versions of these dependencies will encounter compatibility issues.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Update `tsconfig.json` to include `\"allowSyntheticDefaultImports\": true`. Also, ensure `\"experimentalDecorators\": true` and `\"emitDecoratorMetadata\": true` are enabled for decorator support. Verify Vue and vue-class-component versions meet the minimum requirements.","message":"For TypeScript users, `vuex-class` v0.2.0 mandated specific compiler options and minimum versions for Vue and vue-class-component. Specifically, `Vue >= v2.2.0`, `vue-class-component >= v5.0.0`, and the TypeScript compiler flag `--allowSyntheticDefaultImports` are now required.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Always be mindful of property names when omitting arguments. For clarity and to avoid potential mismatches, it is often safer to explicitly provide the Vuex type string as an argument, e.g., `@State('myActualState') myStateProperty`.","message":"When using `vuex-class` decorators like `@State`, `@Getter`, `@Action`, or `@Mutation` without an explicit argument (e.g., `@State foo`), the decorator will implicitly use the property name as the Vuex type. This can lead to silent errors if the property name does not exactly match the corresponding state, getter, action, or mutation name in your Vuex store.","severity":"gotcha","affected_versions":">=0.1.3"}],"env_vars":null,"search_vec":"'0.3.2':65 '2':78 '2019':68,90 '3':81 'access':111 'action':42 'activ':93 'allow':46 'approach':140 'away':114 'base':16,118 'bind':17,158 'boilerpl':59 'built':29 'cadenc':85 'call':125 'class':5,9,33,55,153 'cleaner':130 'code':129 'combin':149 'compon':6,28,34,128,154 'continu':96 'current':61 'declar':108 'decor':2,15,37,138 'decorator-bas':14 'design':19 'develop':47,94,146 'differenti':104 'direct':53,122 'ecosystem':82 'environ':101 'experi':147 'getter':41 'helper':18,120 'high':107 'improv':145 'indic':69 'infrequ':88 'integr':21 'interact':24 'javascript':155 'key':103 'leverag':137 'limit':92 'mainten':73 'make':126 'map':49,119 'mode':74 'move':113 'mutat':44 'offer':10 'primarili':75 'project':71 'properti':52,56 'provid':36,141 'readabl':133 'reduc':58 'releas':66,84 'seamless':25 'set':12 'signific':57 'sinc':89 'stabil':97 'stabl':62 'state':40 'store':23,51,124 'string':117 'string-bas':116 'strong':142 'suggest':91 'support':76 'syntax':109 'target':100 'type':143 'typescript':135,159 'user':136 'version':63 'vue':4,27,32,77,152,156 'vue-class-compon':31,151 'vuex':1,8,22,50,80,112,157 'vuex-class':7 'within':26","created_at":"2026-04-20T01:59:04.537714+00:00","updated_at":"2026-04-20T01:59:04.537714+00:00","problems":[{"fix":"Ensure `tsconfig.json` has `\"experimentalDecorators\": true` and `\"emitDecoratorMetadata\": true` under `compilerOptions`.","cause":"This typically means TypeScript decorators are not correctly configured or enabled in your project's `tsconfig.json`.","error":"TypeError: Decorator expected a function, but got undefined."},{"fix":"Double-check the exact string passed to the decorator (`@Action('myActionName')`) against your Vuex store definition. If using namespaced modules, ensure the `namespace` helper and its path are correct, e.g., `someModule.Action('myAction')`.","cause":"The string provided to the decorator (or the property name if omitted) does not match any action, getter, mutation, or state in your Vuex store, or in the specified namespaced module.","error":"Error: [vuex] unknown action type: someAction (or getter/mutation/state type)"},{"fix":"Run `npm install vuex-class` or `yarn add vuex-class`. Verify that `node_modules` is accessible and your `tsconfig.json` is correctly configured to include `typeRoots` if you have custom type declaration paths.","cause":"The `vuex-class` package is not installed or TypeScript cannot locate its declaration files.","error":"TS2307: Cannot find module 'vuex-class' or its corresponding type declarations."},{"fix":"Ensure your Vuex store is created and passed to the root Vue instance: `new Vue({ store, ... }).$mount('#app')`. If using sub-components, confirm they inherit the store correctly.","cause":"The Vuex store instance is not correctly injected or available to the Vue component context where `vuex-class` decorators are being used.","error":"Uncaught TypeError: Cannot read properties of undefined (reading '$store')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/ktsn/vuex-class","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vuex-class","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}