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是如何被找到并且执行的呢？

上源码

属性的意义

_actions用于存放所有注册的action

_mutations用于存放所有注册的mutation

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

轮到installModule函数要出马了。

installModule的意义是初始化根模块然后递归的初始化所有模块，并且收集模块树的所有getters、actions、mutations、以及state。

看一下installModule的代码,installModule并不是在类的原型上，并不暴露出来，属于一个私有的方法，接收五个参数。

store(Vuex.store的实例对象。

rootState (根结点的state数据)。

path 被初始化模块的path(前两张讲过path的意义)。

module 被初始化的模块。

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如何整理模块名的呢？

效果：

如果这个模块有自己的命名空间(namespaced为true)这个模块的全名就是父模块的全名+自己的模块名，

如果这个模块没有自己的命名空间(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 + '/' : '')

}, '')

}

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

module.forEachAction

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属性中啊

看一下这个名字的mutation有没有被注册过，没有就声明一下，然后push进去。

如果这个名字的mutation被注册过，就push进去。

action同理

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

总结

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

首先遍历模块树获取每个模块的全名。

把模块内的action和mutation加上模块全名，整理成一个全新的名字放入_actions 、 _mutations属性中。

dispacth和commit如何调用aciton和mutation 的将在下章讲述

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

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