Vuex源码学习（六）action和mutation如何被调用的（前置准备篇）

module与moduleCollection你一定要会啊！Vuex源码学习（五）加工后的module

在组件中使用vuex的dispatch和commit的时候，我们只要把action、mutation注册好，通过dispatch、commit调用一下方法名就可以做到。

使用方式

vue组件内

//in vue component
this.$store.commit('setName',{name : 'xLemon'});
this.$store.commit('list/setName',{name : 'xLemon'});
复制代码

vuex的mutation中

// in mutation.js
export const setName = function(state,payload){
    state.name = payload.name;
}
复制代码

// in list mutation.js 在名为list的模块下的mutation（有自己的命名空间）
export const setName = function(state,payload){
    state.name = payload.name;
}
复制代码

我们传递的只是一个字符串，commit是如何找到注册mutation时的同名方法的呢？有命名空间的这种mutation是如何被找到并且执行的呢？

上源码

属性的意义

1. _actions用于存放所有注册的action
2. _mutations用于存放所有注册的mutation

被注册的action和mutation如何被放到对应的属性中的呢？

轮到installModule函数要出马了。

installModule的意义是初始化根模块然后递归的初始化所有模块，并且收集模块树的所有getters、actions、mutations、以及state。 看一下installModule的代码,installModule并不是在类的原型上，并不暴露出来，属于一个私有的方法，接收五个参数。

1. store（Vuex.store的实例对象。
2. rootState (根结点的state数据)。
3. path 被初始化模块的path（前两张讲过path的意义）。
4. module 被初始化的模块。
5. hot 热更新（并不关键）

function installModule (store, rootState, path, module, hot) {
  const isRoot = !path.length
  // 获取全名
  const namespace = store._modules.getNamespace(path)

  // register in namespace map
  if (module.namespaced) {
    // 设置命名空间对照map
    store._modulesNamespaceMap[namespace] = module
    //console.log(store._modulesNamespaceMap);
  }
  // set state
  if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1))
    const moduleName = path[path.length - 1]
    // 把子模块的state(数据)绑定到父模块上（按照层级）
    store._withCommit(() => {
      Vue.set(parentState, moduleName, module.state)
    })
  }
  const local = module.context = makeLocalContext(store, namespace, path)
  // 使用模块暴露出来的方法来注册mutation、action、getter
  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  module.forEachAction((action, key) => {
    const type = action.root ? key : namespace + key
    const handler = action.handler || action
    registerAction(store, type, handler, local)
  })

  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key
    registerGetter(store, namespacedType, getter, local)
  })

  module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot)
  })
}
复制代码

这个函数虽然只有40多行，但处于一个承上启下的关键点，这一章只会分析如何收集mutation与action其余的内容会再下一章讲述。

installModule首先获取一下这个模块的命名（我称之为全名） 依赖_modules（ModuleCollection实例对象）的getNamespace方法。

根据模块的path，path有从根结点到当前节点这条路径上按顺序排序的所有模块名(根结点没有模块名，并没有设置在path，所以根模块注册时是个空数组，他的子模块的path就是[子模块的名字])。那么Vuex如何整理模块名的呢？

效果：

1. 如果这个模块有自己的命名空间（namespaced为true）这个模块的全名就是父模块的全名+自己的模块名，
2. 如果这个模块没有自己的命名空间（namespaced为false）这个模块的全名就是父模块的全名

为什么会是这样？分析一下代码

getNamespace (path) {
    let module = this.root //根模块
    return path.reduce((namespace, key) => {
      //根模块的path是个空数组不执行
      // path的第一项是根模块的儿子模块。
      // 获取儿子模块 并且将替换module （path的下一项就是儿子模块中的子模块了）
      // 下次累加 就是这个module（轮到子模块了）去找它（子模块）的子模块
      module = module.getChild(key)
      // 查看儿子模块是不是设置了命名空间
      //如果设置了这个模块的全名就增加自己的模块名和一个'/'分割后面的模块名，
      //没有的话返回一个'',
      // reduce累加可以把这个名称进行累加
      return namespace + (module.namespaced ? key + '/' : '')
    }, '')
}
复制代码

获取完模块的全名了，之后我们看一下这两个函数

1. module.forEachAction
2. module.forEachMutation

在上一章节module提供了遍历自己内部的action、mutation的方法。

 module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
})

module.forEachAction((action, key) => {
    const type = action.root ? key : namespace + key
    const handler = action.handler || action
    registerAction(store, type, handler, local)
 })
复制代码

const namespacedType = namespace + key

这句话 就是拼接出真正的mutation、action的名字

模块全名+mutation／action的名字。也就是一开始我举例的list/setName是这个mutation的全名（被调用的时候用）

this.$store.commit('list/setName',{name : 'xLemon'});
复制代码

名称已经获取到了，下一步怎么办？

把这些函数按照对应名字放到之前说的_actions、_mutations属性中啊

1. 看一下这个名字的mutation有没有被注册过，没有就声明一下，然后push进去。
2. 如果这个名字的mutation被注册过，就push进去。
3. action同理

小彩蛋 设置两个不同模块的同名mutation（全名一样哦）这两个mutation都会执行，action也是一样的。

总结

action和mutation在被dispatch和commit调用前，

1. 首先遍历模块树获取每个模块的全名。
2. 把模块内的action和mutation加上模块全名，整理成一个全新的名字放入_actions 、 _mutations属性中。
3. dispacth和commit如何调用aciton和mutation 的将在下章讲述

下一章：我们讨论action和mutation如何被调用的（调用篇）。

我是一个应届生，最近和朋友们维护了一个公众号，内容是我们在从应届生过渡到开发这一路所踩过的坑，已经我们一步步学习的记录，如果感兴趣的朋友可以关注一下，一同加油~

转载于:https://juejin.im/post/5c90dd28f265da60fe7c240e