前言

根據上一篇，【手寫Vuex】-提取模塊信息，我們已經可以獲取到模塊的信息了，將模塊信息變成了我們想要的數據結構，接下來我們就要根據模塊的信息，來安裝模塊的數據。

在上一篇當中我們定義了一個 ModuleCollection 類，這個類的作用就是將模塊的信息轉換成我們想要的數據結構。

接下來我們就要根據這個數據結構來安裝模塊的數據。

安裝模塊數據

那么怎么安裝模塊數據呢？首先我們先看一下怎么安裝數據，在安裝數據之前，我們在創建 Store 的時候我們的 root 也就是根組件已經安裝完畢了，所以我們的根組件就不用安裝了，我們只需要安裝根組件下面的子組件的數據就可以了。

那么安裝子模塊的數據我們怎么安裝呢？我這里直接開辟一個全新的方法來處理這件事情，安裝子模塊的數據，我們先來看一下代碼：

// 安裝子模塊的數據
this.initModules([], this.modules.root);

initModules(arr, module) {
}

如上我開辟對的方法我們先來看一下這個方法的參數，第一個參數是一個空數組，第二個參數是我們的根模塊。

那么我們在這個方法里面要做什么呢？我們要做的就是安裝子模塊的數據，那么我們怎么安裝子模塊的數據呢？首先我們要知道當前的模塊是不是根模塊，如果是根模塊的話，我們就不用安裝了，因為根模塊已經安裝完畢了，我們只需要安裝根模塊下面的子模塊就可以了。

那么我們怎么判斷當前的模塊是不是根模塊呢？我們可以通過 arr 這個數組來判斷，如果 arr 這個數組是空數組的話，那么我們就可以判斷當前的模塊是根模塊，如果不是空數組的話，那么我們就可以判斷當前的模塊是子模塊。

好了我們先上代碼：

initModules(arr, module) {
    if (arr.length > 0) {
    }

    for (let moduleName in module._children) {
        this.initModules(arr.concat(moduleName), module._children[moduleName]);
    }
}

在 initModules 當中我添加了一個 if，一個 for，if 主要作用就是用于判斷如果當前模塊是子模塊，那么就需要將數據安裝到 this.state 上面，對應著：

if (arr.length > 0) {
}

如果當前模塊不是子模塊，那么就需要從根模塊中取出子模塊的信息來安裝，對應著：

for (let moduleName in module._children) {
    this.initModules(arr.concat(moduleName), module._children[moduleName]);
}

好了我們先不繼續往下寫，我們先來打印一下 arr，看一下 arr 是什么樣子的，我們來看一下打印的結果：

通過如上結果打印我們就可以很好的根據這個結構來完善我們的代碼了, 思路是這樣的，如果 arr 是空數組的話，那么我們就可以判斷當前的模塊是根模塊，如果不是空數組的話，那么我們就可以判斷當前的模塊是子模塊。

是子模塊的話我們要做的就是將子模塊的數據安裝到 this.state 上面，如果是根模塊的話，我們就不用安裝了，因為根模塊已經安裝完畢了，我們只需要安裝根模塊下面的子模塊就可以了。

代碼繼續往下走，我們現在主要編寫的代碼就是實現 if (arr.length > 0) 這個判斷條件的代碼，說明是子模塊，我們是 arr 打印結果是 [] [home] [account] [account, login] 那么我們首先要安裝的是 home，然后是 account，然后是 login。

那么我們怎么安裝呢？如下：

if (arr.length > 0) {
    let parent = arr.splice(0, arr.length - 1).reduce((state, currentKey) => {
        return state[currentKey];
    }, this.state);
    Vue.set(parent, arr[arr.length - 1], module._state);
}

我們先來看一下這段代碼，首先我們先來看一下 arr.splice(0, arr.length - 1) 這段代碼，這段代碼的作用就是將 arr 數組的最后一個元素去掉，然后返回一個新的數組，這個新的數組就是我們要安裝的模塊的父模塊的路徑。

然后我們再來看一下 reduce((state, currentKey) => { return state[currentKey]; }, this.state) 這段代碼，這段代碼的作用就是根據父模塊的路徑來獲取到父模塊的數據，然后我們再來看一下 Vue.set(parent, arr[arr.length - 1], module._state) 這段代碼，這段代碼的作用就是將子模塊的數據安裝到父模塊的數據上面。

測試結果

好了我們先來看一下代碼的執行結果：

總結

好了，這篇文章我們主要是實現了安裝子模塊的數據，我們通過一個新的方法來安裝子模塊的數據，然后我們通過一個 if 來判斷當前的模塊是不是子模塊，如果是子模塊的話，我們就將子模塊的數據安裝到父模塊的數據上面，如果不是子模塊的話，我們就不用安裝了，因為根模塊已經安裝完畢了，我們只需要安裝根模塊下面的子模塊就可以了。

可能大家對 arr.splice(0, arr.length - 1) 這段代碼不是很理解，這段代碼的作用就是將 arr 數組的最后一個元素去掉，然后返回一個新的數組，這個新的數組就是我們要安裝的模塊的父模塊的路徑。

例如我們的 arr 存放的是 [home] 那么我們的 arr.splice(0, arr.length - 1) 就會返回一個空數組，這個空數組就是我們要安裝的模塊的父模塊的路徑。

空數組的話，然后又調用了 reduce，這回是空數組，那么就會返回 this.state，也就是根模塊的數據，然后我們再來看一下 Vue.set(parent, arr[arr.length - 1], module._state) 這段代碼，這段代碼的作用就是將子模塊的數據安裝到父模塊的數據上面。

parent 就是根模塊的數據，arr[arr.length - 1] 就是我們要安裝的模塊的名稱，module._state 就是我們要安裝的模塊的數據。

這是沒有層級嵌套的字模塊安裝的情況，我們再來看一個有層級嵌套的子模塊安裝的情況，例如我們的 arr 存放的是 [account, login] 那么我們的 arr.splice(0, arr.length - 1) 就會返回一個 [account] 數組，這個數組就是我們要安裝的模塊的父模塊的路徑。

然后我們再來看一下 reduce((state, currentKey) => { return state[currentKey]; }, this.state) 這段代碼，這段代碼的作用就是根據父模塊的路徑來獲取到父模塊的數據，例如我們的父模塊的路徑是 [account] 那么我們就會獲取到 account 模塊的數據，然后我們再來看一下 Vue.set(parent, arr[arr.length - 1], module._state) 這段代碼，這段代碼的作用就是將子模塊的數據安裝到父模塊的數據上面。

parent 就是 account 模塊的數據，arr[arr.length - 1] 就是我們要安裝的模塊的名稱，module._state 就是我們要安裝的模塊的數據。

好了，這篇文章我們主要是實現了安裝模塊的數據，下一篇文章將會實現安裝模塊的方法。

總結

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

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