Vuex中輔助函數mapxxx的實現分析

1、輔助函數的作用

Vuex安裝階段，store實例往每一個組件上混入beforeCreate鉤子函數，添加一個指向它的 $store 實例。這樣我們可以在組件中通過 $store 訪問store的任何屬性和方法。

但是當一個組件需要獲取多個狀態時，將這些都聲明出來會重複和冗餘，同樣getter、mutation和action也這樣的問題。於是Vuex提供了一系列mapxxx輔助函數來幫我們實現在組件中很方便的注入store的屬性和方法。

輔助函數實現源碼

2、實現

1、mapState

mapState目的是要構建成一個對象res，對象的元素是一個名稱爲mappedState的方法。目的是要擴展到組件的 computed 計算屬性中。

1. 將Module的namespace標準化處理。‘mName’ => ‘mName/’
2. 將states對象或數組統一轉成格式爲 [{ key:1 , val:2 }] 的數組
3. 遍歷數處理key和val，以key作爲對象res的key，對應值是一個mappedState函數，在函數內部獲取到 $store.getter和 $store.state。
4. 如果namespace存在，就通過namespace獲取該層局部的module對象。 const module = store._modulesNamespaceMap[namespace]
5. 判斷val是否是一個函數，若是就將state和getters作爲參數傳入得到state的值，否就直接返回值state[val]。

2、mapGetters

mapGetters和mapState類似。

1. 將Module的namespace標準化處理。‘mName’ => ‘mName/’
2. 將getters對象或數組統一轉成格式爲 [{ key:1 , val:2 }] 的數組
3. 拼接val = namespace + val 是因爲getters的值以這樣
   .
4. 返回this.$store.getters[val] 直接拿到當前模塊的getter

3、mapMutations

mapMutations 支持傳入一個數組或者一個對象，目標都是組件中對應的 methods 映射爲 store.commit 的調用。

1. 將Module的namespace標準化處理。‘mName’ => ‘mName/’
2. 將mutations對象或數組統一轉成格式爲 [{ key:1 , val:2 }] 的數組
3. 遍歷數組，以key作爲對象的key，值是一個mappedMutation 函數
4. 從store中拿到commit方法，或者通過namespace獲取改層的module，進而拿到局部的commit
5. 執行store的commit方法

4、mapActions

我們可以在組件中使用 this.$store.dispatch(‘xxx’) 提交 action，或者使用 mapActions 輔助函數將組件中的 methods 映射爲 store.dispatch 的調用。

mapActions 和 mapMutations 的實現幾乎一樣，不同的是把 commit 方法換成了 dispatch。