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函式要出馬了。
- 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方法。
效果：
- 如果這個模組有自己的名稱空間（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如何被呼叫的（呼叫篇）。
我是一個應屆生，最近和朋友們維護了一個公眾號，內容是我們在從應屆生過渡到開發這一路所踩過的坑，已經我們一步步學習的記錄，如果感興趣的朋友可以關注一下，一同加油~
