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

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