Getting Started

Define a module

To define a module, create a class that extends from VuexModule and must be decorated with Module decorator

// eg. /app/store/mymodule.ts
import { Module, VuexModule } from 'vuex-module-decorators'

@Module
export default class MyModule extends VuexModule {
  someField: string = 'somedata'
}

CAREFUL

There is a Module class in the vuex package too, which is not a decorator. Make sure you import correct Module decorator from from vuex-module-decorators

import {Module} from 'vuex'
✔️ import {Module} from 'vuex-module-decorators'

Use in store

In you store, you use the MyModule class itself as a module.

import Vuex from 'vuex'
import MyModule from '~/store/mymodule'

const store = new Vuex.Store({
  modules: {
    myMod: MyModule
  }
})

NOTE

The way we use the MyModule class is different from classical object-oriented programming and similar to how vue-class-component works. We use the class itself as module, not an object constructed by the class

new MyModule()

Access State

All the usual ways of accessing the module works -

  1. Import The store



     

    import store from '~/store'
    
    store.state.myMod.someField
    
  2. Use this.$store if in component

     

    this.$store.state.myMod.someField
    

In addition to that, for a much more typesafe access, we can use getModule()

  1. Use getModule() to create type-safe accessor








     



    import { Module, VuexModule, getModule } from 'vuex-module-decorators'
    import store from '@/store'
    
    @Module({ dynamic: true, store, name: 'mymod' })
    class MyModule extends VuexModule {
      someField: number = 10
    }
    const myMod = getModule(MyModule)
    myMod.someField //works
    myMod.someOtherField //Typescript will error, as field doesn't exist