vuex knowledge point record

• state: 

With a single state tree, each application will contain only one instance of the store.

• getters:
• mutation: (synchronous operation)

this.$store.commit('xxx')

Use mapMutations in methods to map methods in a component to  store.commit calls.

• actions: (asynchronous action)

The Action function accepts a context object with the same methods and properties as the store instance, but not the store instance itself (inside the module, namespace). Actions submit mutations, not state changes directly.

store.dispatch('increment')

支持promise，async / await

• modules: (local: inside the module )

For mutations and getters inside a module, the first argument received is the module's local state object .

For the actions inside the module, the local state is  context.state exposed through, and the root node state is context.rootState。

By default, actions, mutations and getters inside modules are registered in the global namespace - this enables multiple modules to respond to the same mutation or action.

If you want your module to have higher encapsulation and reusability, you can  namespaced: true make it a namespaced module by adding it.

• hot reload

// store.js
import View from 'view'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'

Vue.use(Vuex)

const state = { ... }

const store = new Vuex.Store({
  state,
  mutations,
  modules: {
    a: moduleA
  }
})

if (module.hot) {
  // Make actions and mutations hot-reloadable modules
 module.hot.accept(['./mutations', './modules/a'], () => {
    // Get the updated module
    // Because of the module compilation format of babel 6, `.default` needs to be added here
    const newMutations = require('./mutations').default
    const newModuleA = require('./modules/a').default
    // load new module
   store.hotUpdate({
      mutations: newMutations,
      modules: {
        a: newModuleA
      }
    })
  })
}