vuex-module-decorators

# 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 your 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

← State →