前言

經過上一篇文章的介紹，我們實現了將模塊安裝到 store 中，那么本章我們就來介紹一下怎么安裝模塊當中的方法也就是 actions、mutations、getters。

所以本次文章的目標就是將模塊當中的 actions、mutations、getters 安裝到 store 中，然后在組件中使用。

分析階段

那么安裝 actions、mutations、getters 就不能在 Store 的構造函數進行調用安裝方法進行安裝了。

為什么呢，因為你在使用構造函數進行調用安裝方法是拿不到我們的子模塊的，所以我們該怎么改造呢？

首先我將這三個 init 方法剪切了：

然后我們是不是可以在 installModule 方法當中進行安裝呢？

我的回答是可以的，我們可以在 installModule 方法當中進行安裝。

我們在 initModule 方法當中遍歷取出了所有的子模塊，在這個方法中我們就可以拿到所有的子模塊，所以說我覺得在這里安裝 actions、mutations、getters 是最好的，更為合適的。

代碼實現

那么我們該給 initActions、initMutations、initGetters 傳遞什么參數呢？之前傳遞的是 options 選項，現在我們傳遞的是 module 模塊，因為我們在 installModule 方法當中已經拿到了 module 模塊，所以我們直接將 module 模塊傳遞給 initActions、initMutations、initGetters 就可以了。

當前模塊保存到了當前傳遞進來參數的 _raw 屬性上面，改造之后的代碼如下：

由于增加了我們的一個子模塊所以，我們的 initActions、initMutations、initGetters 方法是需要進行微調的，首先我們來微調 initGetters 方法，由于這個方法會被多次調用，所以說我們首先進入到方法當中進行分析，在 getters 當中由于它多次被調用，是不是說新增過了 getters 就不需要再次新增了，所以說我們需要判斷一下，如果說當前的 getters 已經存在了，那么就不需要再次新增了，如果說當前的 getters 不存在，那么就需要新增。改造之后的代碼如下：

邏輯非常的簡單，就是如果有就返回，沒有就返回一個空對象，這個呢就是我們 getters 需要做的改變。

然后呢，我們在來看一下 actions 和 mutations，這兩個方法有什么改變，和剛才一樣，由于它會被多次調用，所以說在 mutations 當中，如果說當前的 mutations 已經存在了，那么就不需要再次新增了，如果說當前的 mutations 不存在，那么就需要新增。改造之后的代碼如下：

actions 同理可證一樣的邏輯，自己添加一下別忘記了，不然會導致 "TypeError: Cannot read properties of undefined (reading 'forEach')" 會重新開辟一個新的 actions 所以就不會按照我之前分析的思路去走邏輯了，創建了 mutations 之后，在之前的文章當中我有介紹到，mutations 與 actions 當中的方法是可以重復的，也就是說在子模塊當中定義的方法是不會覆蓋掉根模塊當中的方法的，所以說我們在這里需要將子模塊當中的方法與根模塊當中的方法進行合并，合并之后的方法是一個數組，然后在執行這個數組當中的方法，這樣就可以了。

所以我們要改造的就是在添加方法的時候進行改造代碼，首先我們拿到對應名稱的方法，先去獲取一下看看有沒有對應名稱的方法，看看有沒有，如果說沒有，我們就返回一個空數組，后續就是用這個數組來保存同名的方法，那這里改為了用數組來保存同名的方法，那么就不是直接賦值了，這里應該改造為往這個名稱的數組當中添加方法，改造之后的代碼如下：

// 2.在Store上新增一個mutations的屬性
this.mutations = this.mutations || {};
// 3.將傳遞進來的mutations中的方法添加到當前Store的mutations上
for (let key in mutations) {
    this.mutations[key] = this.mutations[key] || [];
    this.mutations[key].push((payload) => {
        // 4.將mutations中的方法執行, 并且將state傳遞過去
        mutations[key](this.state, payload);
    });
}

actions 同理可證，改造之后的代碼如下：

好了到這里還沒完，我們目前已經將所有的方法放入到數組當中了，那么以后我們怎么執行這一步我們是不是還需要改造一下，我們在 commit 的時候，我們是不是需要將這個數組當中的方法執行一下，那么我們就需要改造一下 commit 方法，改造之后的代碼如下：

commit = (type, payload) => {
    this.mutations[type].forEach(fn => fn(payload));
}

dispatch 方法也是一樣的，改造之后的代碼如下：

dispatch = (type, payload) => {
    this.actions[type].forEach(fn => fn(payload));
}

測試

好了到這里我們的代碼就改造完畢了，我們來找一個組件來測試一下，將我們之前的測試共享數據的注釋代碼放開，頁面效果如下：

發現 getters 是 undefined，好了我們回到代碼來看看到底是怎么回事引起的，找到我們的 getters，發現我們給的 state 是不對的，我們應該將當前模塊的 state 傳遞進去，改造之后的代碼如下：

return getters[key](options.state);

刷新頁面就會發現已經好了，那么我們的 actions 和 mutations 也是一樣的:

mutations[key](options.state, payload);

actions 沒有用到所以這里我們就不用管它。好了到這里我覺得我編寫的代碼已經沒有問題了，我們來看一下頁面效果，這里我錄制一個 gif 圖片，方便大家觀看：

最后

總結

以上是生活随笔為你收集整理的手撕Vuex-安装模块方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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