vuex

State

role

• Vuex uses a single state tree — a single state object that contains all application-level states

access

• this.$store.state

Auxiliary function

• mapState

  • AIDS in mapping state in a store to computed properties within a component
  • computed : mapState({count: state => state.count})
  • computed : {… mapState([‘count’])}

Getter

role

• The computed property of store, which takes state as its first argument and derives some states from state

access

• Returns the getter calculation property directly: this.store.getters. XXX
• Returns the calculated property function: this.store.getters.xxx()

Auxiliary function

• mapGetters

  • Map getters in a store to local computed properties within a component
  • computed : mapGetters({count: Count})
  • computed : {… mapGetters([‘count’])}

Mutation

role

• The only way to change the state in Vuex’s store is to commit mutation

use

• Each mutation has a string event type (type) and a callback function (handler)
• Mutations: {increment (state) {// change the status state.count++}}
• Increment is the name of the function and also the event type (type), and the increment function itself acts as the mutation callback function

Action

role

• The Action commits mutation rather than a direct state change
• Actions can contain any asynchronous operation

Distribution of the Action

• store.dispatch(‘increment’)
• What it does: Because mutation must be executed synchronously, instead of distributing mutation directly, trigger actions are used. Perform asynchronous operations in action.

Component distribution

• this.$store.dispatch(‘xxx’); // XXX is the action name

Module

role

• Vuex allows us to split the Store into modules, avoiding the bloat caused by having all the state of the application clustered into one large object

The namespace

• By default, actions, mutations, and getters inside a module are registered in the global namespace — enabling multiple modules to respond to the same mutation or action.
• Adding namespaced: True makes modules namespaced

Module dynamic registration

• this.$store.registerModule(‘name’,{state: , getter:,mutation:,action:,module} )

XMind – Trial Version