vuex-class

library0.3.2jsnpmunverified

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`.

web-framework

npm install vuex-class

github ↗package ↗

INSTALL

IMPORT

SIG · VUEX-CLASS

vuex-class

web-frameworkjavascriptv0.3.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

State, Getter, Action, Mutation

✓ import { State, Getter, Action, Mutation } from 'vuex-class'

✗ import State from 'vuex-class'

These are named exports for the primary binding decorators, used with TypeScript. Default imports will not work.

namespace

✓ import { namespace } from 'vuex-class'

✗ const namespace = require('vuex-class').namespace

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.

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.

import Vue from 'vue' import Component from 'vue-class-component' import { State, Getter, Action, Mutation, namespace } from 'vuex-class' const someModule = namespace('path/to/module') interface MyState { foo: string; bar: number; } // Define a mock Vuex store for demonstration const store = new Vuex.Store<MyState>({ state: { foo: 'hello', bar: 123 }, getters: { foo: (state: MyState) => state.foo.toUpperCase() }, mutations: { setFoo(state: MyState, payload: { value: string }) { state.foo = payload.value } }, actions: { updateFoo({ commit }, payload: { value: string }) { commit('setFoo', payload) } }, modules: { 'path/to/module': { namespaced: true, state: { baz: 'module data' }, getters: { foo: (state: { baz: string }) => state.baz.toUpperCase() } } } }) @Component export class MyComp extends Vue { @State('foo') stateFoo!: string @State((state: MyState) => state.bar) stateBar!: number @Getter('foo') getterFoo!: string @Action('updateFoo') actionFoo!: (payload: { value: string }) => void @Mutation('setFoo') mutationFoo!: (payload: { value: string }) => void @someModule.Getter('foo') moduleGetterFoo!: string // If the argument is omitted, use the property name @State foo!: string @Getter bar!: string // Assuming 'bar' getter exists in store @Action baz!: (payload: any) => void // Assuming 'baz' action exists @Mutation qux!: (payload: any) => void // Assuming 'qux' mutation exists created () { console.log('stateFoo:', this.stateFoo) // -> store.state.foo console.log('stateBar:', this.stateBar) // -> store.state.bar console.log('getterFoo:', this.getterFoo) // -> store.getters.foo this.actionFoo({ value: 'world' }) // -> store.dispatch('updateFoo', { value: 'world' }) this.mutationFoo({ value: 'test' }) // -> store.commit('setFoo', { value: 'test' }) console.log('moduleGetterFoo:', this.moduleGetterFoo) // -> store.getters['path/to/module/foo'] console.log('Inferred State foo:', this.foo) } } // For the example to be runnable, a Vue instance and store are needed. import Vuex from 'vuex' Vue.use(Vuex) new Vue({ store, render: h => h(MyComp) }).$mount('#app') // You would also need an #app element in your HTML // <div id="app"></div>

Debug

Known issues

breaking`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.

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.

affects: >=0.3.0

breakingFor 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.

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.

affects: >=0.2.0

gotchaWhen 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.

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`.

affects: >=0.1.3

Errors

Common errors & fixes

TypeError: Decorator expected a function, but got undefined.

This typically means TypeScript decorators are not correctly configured or enabled in your project's `tsconfig.json`.

fix

Ensure `tsconfig.json` has `"experimentalDecorators": true` and `"emitDecoratorMetadata": true` under `compilerOptions`.

Error: [vuex] unknown action type: someAction (or getter/mutation/state type)

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.

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')`.

TS2307: Cannot find module 'vuex-class' or its corresponding type declarations.

The `vuex-class` package is not installed or TypeScript cannot locate its declaration files.

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.

Uncaught TypeError: Cannot read properties of undefined (reading '$store')

The Vuex store instance is not correctly injected or available to the Vue component context where `vuex-class` decorators are being used.

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.

Upgrade

Version history

0.3.2latest on npm

Audit

Dependencies

vuerequiredCore dependency for Vue applications.

vuexrequiredRequired for Vuex store integration.

vue-class-componentrequiredProvides the class-style component syntax and decorators.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ktsn/vuex-class ↗

packagehttps://www.npmjs.com/package/vuex-class ↗