vuex-class-modules

This is yet another package to introduce a simple type-safe class style syntax for your vuex modules, inspired by vue-class-component.

Installation

npm install vuex-class-modules

And make sure to have the --experimentalDecorators flag enabled.

Both a commonjs and a esm module build are published. If you have a webpack-based setup, it will use the esm modules by default.

Usage

Vuex modules can be written using decorators as a class:

1// user-module.ts
2import { VuexModule, Module, Mutation, Action } from "vuex-class-modules";
3
4@Module
5class UserModule extends VuexModule {
6  // state
7  firstName = "Foo";
8  lastName = "Bar";
9
10  // getters
11  get fullName() {
12    return this.firstName + " " + this.lastName;
13  }
14
15  // mutations
16  @Mutation
17  setFirstName(firstName: string) {
18    this.firstName = firstName;
19  }
20  @Mutation
21  setLastName(lastName: string) {
22    this.lastName = lastName;
23  }
24
25  // actions
26  @Action
27  async loadUser() {
28    const user = await fetchUser();
29    this.setFirstName(user.firstName);
30    this.setLastName(user.lastName);
31  }
32}
33
34// register module (could be in any file)
35import store from "path/to/store";
36export const userModule = new UserModule({ store, name: "user" });

The module will automatically be registered to the store as a namespaced dynamic module when it is instantiated. (The modules are namespaced to avoid name conflicts between modules for getters/mutations/actions.)

The module can then be used in vue components as follows:

1// MyComponent.vue
2import Vue from "vue";
3import { userModule } from "path/to/user-module.ts";
4
5export class MyComponent extends Vue {
6  get firstName() {
7    return userModule.firstName; // -> store.state.user.firstName
8  }
9  get fullName() {
10    return userModule.fullName; // -> store.getters["user/fullName]
11  }
12
13  created() {
14    userModule.setFirstName("Foo"); // -> store.commit("user/setFirstName", "Foo")
15    userModule.loadUser(); // -> store.dispatch("user/loadUser")
16  }
17}

What about rootState and rootGetters?

There are two ways to access other modules within a module, or dispatch actions to other modules.

1. Simply import the instantiated module (suitable if the modules are instantiated in the same file as they are defined):

1// my-module.ts
2
3// import the module instance
4import { otherModule } from "./other-module";
5
6@Module
7class MyModule extends VuexModule {
8  get myGetter() {
9    return otherModule.foo;
10  }
11
12  @Action
13  async myAction() {
14    await otherModule.someAction();
15    // ...
16  }
17}

2. The other module can be registered through the constructor (suitable if the modules are instantiated elsewhere)

1// my-module.ts
2
3// import the class, not the instance
4import { OtherModule } from "./other-module";
5
6@Module
7export class MyModule extends VuexModule {
8  private otherModule: OtherModule;
9
10  constructor(otherModule: OtherModule, options: RegisterOptions) {
11    super(options);
12    this.otherModule = otherModule;
13  }
14
15  get myGetter() {
16    return this.otherModule.foo;
17  }
18
19  @Action
20  async myAction() {
21    await this.otherModule.someAction();
22    // ...
23  }
24}
25
26// register-modules.ts
27import store from "path/to/store";
28import { OtherModule } from "path/to/other-module";
29import { MyModule } from "path/to/my-module";
30
31export const otherModule = new OtherModule({ store, name: "otherModule" });
32export const myModule = new MyModule(otherModule, { store, name: "myModule" });

The local modules will not be part of the state and cannot be accessed from the outside, so they should always be declared private.

1myModule.otherModule; // -> undefined

The store.watch function

Vuex can also be used ouside of vue modules. To listen for changes to the state, vuex provides a watch method.

This api is also provided by vuex-class-modules under the method name $watch to prevent name collisions. For example you can do:

1import store from "./store";
2import { MyModule } from "./my-module";
3
4const myModule = new MyModule({ store, name: "MyModule" });
5myModule.$watch(
6  (theModule) => theModule.fullName,
7  (newName: string, oldName: string) => {
8    // ...
9  },
10  {
11    deep: false,
12    immediate: false,
13  }
14);

and to unwatch:

1const unwatch = myModule.$watch(...);
2unwatch();

Register options

• name [required]: Name of the module
• store [required]: The vuex store - which can just be instantiated as empty:

1// store.ts
2import Vue from "vue";
3import Vuex from "vuex";
4Vue.use(Vuex);
5const store = new Vuex.Store({});

Module options

The module decorator can also accept options:

• generateMutationSetters [optional, default=false]: Whether automatic mutation setters for the state properties should be generated, see Generate Mutation Setters.

Example

The vuex shopping cart example rewritten using vue-class-component and vuex-class-modules can be found in the example directory. Build the example using:

npm run example

Caveats of this

As for vue-class-component this inside the module is just a proxy object to the store. It can therefore only access what the corresponding vuex module function would be able to access:

1@Module
2class MyModule extends VuexModule {
3  foo = "bar";
4
5  get someGetter() {
6    return 123;
7  }
8  get myGetter() {
9    this.foo; // -> "bar"
10    this.someGetter; // -> 123
11    this.someMutation(); // undefined, getters cannot call mutations
12    this.someAction(); // -> undefined, getters cannot call actions
13  }
14
15  @Mutation
16  someMutation() {
17    /* ... */
18  }
19  @Mutation
20  myMutation() {
21    this.foo; // -> "bar"
22    this.someGetter; // -> undefined, mutations dont have access to getters
23    this.someMutation(); // -> undefined, mutations cannot call other mutations
24    this.someAction(); // -> undefined, mutations cannot call actions
25  }
26
27  @Action
28  async someAction() {
29    /* ... */
30  }
31  @Action
32  async myAction() {
33    this.foo; // -> "bar"
34    this.someGetter; // -> 123
35    this.myMutation(); // Ok
36    await this.someAction(); // Ok
37  }
38}

Local Functions

The module can have non-mutation/action functions which can be used inside the module. As for local modules, these functions will not be exposed outside the module and should therefore be private. this will be passed on to the local function from the getter/mutation/action.

1@Module
2class MyModule extends VuexModule {
3  get myGetter() {
4    return myGetterHelper();
5  }
6  private myGetterHelper() {
7    // same 'this' context as myGetter
8  }
9
10  @Mutation
11  myMutation() {
12    this.myMutationHelper();
13  }
14
15  // should be private
16  myMutationHelper() { /* ... */}
17}
18const myModule = new MyModule({ store, name: "myModule });
19myModule.myMutationHelper // -> undefined.

Generate Mutation Setters

As I often find myself writing a lot of simple setter mutations like

1@Module
2class UserModule extends VuexModule {
3  firstName = "Foo";
4  lastName = "Bar";
5
6  @Mutation
7  setFirstName(firstName: string) {
8    this.firstName = firstName;
9  }
10  @Mutation
11  setLastName(lastName: string) {
12    this.lastName = lastName;
13  }
14}

a module option generateMutationSetters has been added, which when enabled will generate a setter mutation for each state property. The state can then be modified directly from the actions:

1@Module({ generateMutationSetters: true })
2class UserModule extends VuexModule {
3  firstName = "Foo";
4  lastName = "Bar";
5
6  // Auto generated:
7  // @Mutation set__firstName(val: any) { this.firstName = val }
8  // @Mutation set__lastName(val: any) { this.lastName = val }
9
10  @Action
11  async loadUser() {
12    const user = await fetchUser();
13    this.firstName = user.firstName; // -> this.set__firstName(user.firstName);
14    this.lastName = user.lastName; // -> this.set__lastName(user.lastName);
15  }
16}

NOTE: Setters are only generated for root-level state properties, so in order to update a property of an object you have to use a mutation or replace the entire object:

1@Module({ generateMutationSetters: true })
2class UserModule extends VuexModule {
3  user = {
4    id: 123,
5    name: "Foo",
6  };
7
8  @Mutation
9  setUserName() {
10    this.user.name = "Bar"; // OK!
11  }
12
13  @Action
14  async loadUser() {
15    this.user.name = "Bar"; // Bad, the state is mutated outside a mutation
16    this.user = { ...this.user, name: "Bar" }; // OK!
17  }
18}

Vite HMR

Vite (and possibly other bundlers) uses import.meta.hot for HMR, which vuex-class-modules doesn't support currently. Instead a static property

1VuexModule.__useHotUpdate = true; // default false

is provided, which will force hot updates to the store instead of throwing an error when a module with a duplicate name is registered. This could for instance be set only in dev mode

1VuexModule.__useHotUpdate = import.meta.env.DEV;

License

MIT