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如何被調用的(調用篇)。

我是一個應屆生，最近和朋友們維護了一個公眾號，內容是我們在從應屆生過渡到開發這一路所踩過的坑，已經我們一步步學習的記錄，如果感興趣的朋友可以關注一下，一同加油~

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的action mutation 调用_Vuex源码学习（六）action和mutation如何被调用的（前置准备篇）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。