前言

Vuex源码系列不知不觉已经到了第六篇。前置的五篇分别如下：

长篇连载：Vuex源码学习（一）功能梳理

长篇连载：Vuex源码学习（二）脉络梳理

作为一个Web前端，你知道Vuex的install做了什么吗？

长篇连载：Vuex源码学习（四）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函数要出马了。

1. installModule的意义是初始化根模块然后递归的初始化所有模块，并且收集模块树的所有getters、actions、mutations、以及state。 看一下installModule的代码,installModule并不是在类的原型上，并不暴露出来，属于一个私有的方法，接收五个参数。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如何被调用的（调用篇）。