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

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


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


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'
  2. Use this.$store if in component



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