Vuex module decorators

Source

• vuex-module-decorators documentation

Overview

• format to write vuex

Getting Started

• VuexModule and @Module to define module
• usage is different from vue-class-component
• getModule for typesafe access

Core Concepts

State

• all properties of the class will turn into state props
• must be initialized wtih null (wheels: number | null = null)

Getters

• all getter functions will turn into vuex getters
• get something() {...}
• method-style also can

Mutations

• declare functions with @Mutation
• state.item++ = this.item++
• again, not async
• do not define with arrow functions since we need to rebind them at runtime

Actions

• declare functions with @Action
• do not use arrow function

MutationActions

• when we want aysnc with action then commit mutation
• @MutationAction
• if return undefined, the mutation part will not be called

Advanced Usage

Namespaced Modules

• @Module if plan to namespaced module
• can call root:true on @Action to register global actions. Samething for MutationAction

Dynamic Modules

• dynamic: true, store, name:'moduleName to @Module
• does not support dynamic + nested modules
• make sure import/requires are ordered to execute store defination first