Vuex源码分析（五）-- actions

官方描述

Action 类似于mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

让我们来注册一个简单的 action：

const store = new Vuex.Store({
   
  state: {
   
    count: 0
  },
  mutations: {
   
    increment (state) {
   
      state.count++
    }
  },
  actions: {
   
  	// context = {dispatch, commit, getters, state, rootGetters, rootState}
    increment (context) {
   
      context.commit('increment')
    }
  }
})

从这里可以看出，context有6个属性分别是dispatch, commit, getters, state, rootGetters, rootState。你也许会觉得奇怪，为什么getters与state有各自的root信息，而dispatch与commit没有？

因为：dispatch, commit 是方法，可以通过传递参数指向对应的root方法，即store.dispatch(type, payload, {root: true})；而getters与state是属性，不能传参，所以重新引入了rootGetters, rootState属性

源码分析

构造函数store

和mutations一样，核心方法都在 installModule 方法中。

export class Store {
   
  constructor (options = {
   }) {
   
    ...
    // 生成state模型
    this._modules = new ModuleCollection(options)
    const state = this._modules.root.state

    // 处理[state, getters, mutations, actions]的核心方法
    installModule(this, state, [], this._modules.root)
    ...
  }
}

installModule

这段代码主要是将原始 actions 对象封装到store上

function installModule (store, rootState, path, module, hot) {
   
  const namespace = store._modules.getNamespace(path)

  // 生成本地local对象
  const local = module.context = makeLocalContext(store