前言

根據(jù)上一篇，【手寫Vuex】-提取模塊信息，我們已經(jīng)可以獲取到模塊的信息了，將模塊信息變成了我們想要的數(shù)據(jù)結(jié)構(gòu)，接下來我們就要根據(jù)模塊的信息，來安裝模塊的數(shù)據(jù)。

在上一篇當(dāng)中我們定義了一個(gè) ModuleCollection 類，這個(gè)類的作用就是將模塊的信息轉(zhuǎn)換成我們想要的數(shù)據(jù)結(jié)構(gòu)。

接下來我們就要根據(jù)這個(gè)數(shù)據(jù)結(jié)構(gòu)來安裝模塊的數(shù)據(jù)。

安裝模塊數(shù)據(jù)

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

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

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

initModules(arr, module) {
}

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

那么我們在這個(gè)方法里面要做什么呢？我們要做的就是安裝子模塊的數(shù)據(jù)，那么我們怎么安裝子模塊的數(shù)據(jù)呢？首先我們要知道當(dāng)前的模塊是不是根模塊，如果是根模塊的話，我們就不用安裝了，因?yàn)楦K已經(jīng)安裝完畢了，我們只需要安裝根模塊下面的子模塊就可以了。

那么我們怎么判斷當(dāng)前的模塊是不是根模塊呢？我們可以通過 arr 這個(gè)數(shù)組來判斷，如果 arr 這個(gè)數(shù)組是空數(shù)組的話，那么我們就可以判斷當(dāng)前的模塊是根模塊，如果不是空數(shù)組的話，那么我們就可以判斷當(dāng)前的模塊是子模塊。

好了我們先上代碼：

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

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

在 initModules 當(dāng)中我添加了一個(gè) if，一個(gè) for，if 主要作用就是用于判斷如果當(dāng)前模塊是子模塊，那么就需要將數(shù)據(jù)安裝到 this.state 上面，對應(yīng)著：

if (arr.length > 0) {
}

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

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

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

通過如上結(jié)果打印我們就可以很好的根據(jù)這個(gè)結(jié)構(gòu)來完善我們的代碼了, 思路是這樣的，如果 arr 是空數(shù)組的話，那么我們就可以判斷當(dāng)前的模塊是根模塊，如果不是空數(shù)組的話，那么我們就可以判斷當(dāng)前的模塊是子模塊。

是子模塊的話我們要做的就是將子模塊的數(shù)據(jù)安裝到 this.state 上面，如果是根模塊的話，我們就不用安裝了，因?yàn)楦K已經(jīng)安裝完畢了，我們只需要安裝根模塊下面的子模塊就可以了。

代碼繼續(xù)往下走，我們現(xiàn)在主要編寫的代碼就是實(shí)現(xiàn) if (arr.length > 0) 這個(gè)判斷條件的代碼，說明是子模塊，我們是 arr 打印結(jié)果是 [] [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 數(shù)組的最后一個(gè)元素去掉，然后返回一個(gè)新的數(shù)組，這個(gè)新的數(shù)組就是我們要安裝的模塊的父模塊的路徑。

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

測試結(jié)果

好了我們先來看一下代碼的執(zhí)行結(jié)果：

總結(jié)

好了，這篇文章我們主要是實(shí)現(xiàn)了安裝子模塊的數(shù)據(jù)，我們通過一個(gè)新的方法來安裝子模塊的數(shù)據(jù)，然后我們通過一個(gè) if 來判斷當(dāng)前的模塊是不是子模塊，如果是子模塊的話，我們就將子模塊的數(shù)據(jù)安裝到父模塊的數(shù)據(jù)上面，如果不是子模塊的話，我們就不用安裝了，因?yàn)楦K已經(jīng)安裝完畢了，我們只需要安裝根模塊下面的子模塊就可以了。

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

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

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

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

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

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

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

好了，這篇文章我們主要是實(shí)現(xiàn)了安裝模塊的數(shù)據(jù)，下一篇文章將會(huì)實(shí)現(xiàn)安裝模塊的方法。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。