Namespaced Modules

TIP

Before reading this, it is imperative you understand what are namespaced modules

If you intend to use your module in a namespaced way, then you need to specify so in the @Module decorator.

@Module({ namespaced: true, name: 'mm' })
class MyModule extends VuexModule {
  wheels = 2

  @Mutation
  incrWheels(extra: number) {
    this.wheels += extra
  }

  get axles() {
    return this.wheels / 2
  }
}

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

NOTE

The name field in the decorator should match the actual name that you will assign the module to, when you create the store.

It isn't exactly elegant to manually keep these two same, but it is important. We have to convert this.store.dispatch('action') calls into this.store.dispatch('name/action'), and we need the name to be correct in the decorator to make it work

Registering global actions inside namespaced modules

In order to register actions of namespaced modules globally you can add a parameter root: true to @Action and @MutationAction decorated methods.

@Module({ namespaced: true, name: 'mm' })
class MyModule extends VuexModule {
  wheels = 2

  @Mutation
  setWheels(wheels: number) {
    this.wheels = wheels
  }
  
  @Action({ root: true, commit: 'setWheels' })
  clear() {
    return 0
  }

  get axles() {
    return this.wheels / 2
  }
}

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

This way the @Action clear of MyModule will be called by dispatching clear although being in the namespaced module mm. The same thing works for @MutationAction by just passing { root: true } to the decorator-options.

NOTE

When registering an action globally it can not be called by the namespace's name. For the example that means, that the action can not be called by dispatching mm/clear!