Vuex module decorators
Published on Dec 6, 2021
Source
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