前言

好，經(jīng)過上一篇的介紹，了解了 Vuex 當中的模塊化，本章主要介紹 Vuex 當中的模塊化共享數(shù)據(jù)下篇。

我們知道在全局的 Store 對象當中，我們可以定義全局的數(shù)據(jù)，那么如果我們在模塊當中也定義了一個屬性名稱和全局的屬性名稱相同，那么會發(fā)生什么呢？

我們先來看看，在全局當中定義了一個 globalName 屬性，然后在模塊當中也定義了一個 globalName 屬性：

展示一下模塊化當中的 globalName 屬性：

<p>{{ this.$store.state.home.globalName }}</p>

運行項目，查看控制臺是沒有任何錯誤信息的，說明在模塊當中定義與全局相同的屬性名稱是沒有問題的。

看了共享數(shù)據(jù)，接下來我們來看看 getters/mutations/actions 能不能定義與全局相同的方法呢？

getters

我們先來看看 getters，我們在全局當中定義了一個 getGlobalName 方法，然后在模塊當中也定義了一個 getGlobalName 方法：

返回瀏覽器，查看控制臺輸出了一個錯誤信息：

[vuex] duplicate getter key: getGlobalName

說明在模塊當中定義與全局相同的 getters 方法是不行的。

??注意：多個模塊中不能出現(xiàn)同名的getters方法。

mutations

看了 getters，接下來我們來看看 mutations 能不能定義與全局相同的方法呢？

我們在全局當中定義了一個 changeGlobalName 方法，然后在模塊當中也定義了一個 changeGlobalName 方法。

全局：

changeGlobalName(state, payload) {
    console.log("全局中的changeGlobalName");
    state.globalName += payload;
}

模塊：

changeGlobalName(state, payload) {
    console.log("home中的changeGlobalName");
    state.globalName += payload;
}

返回瀏覽器，點擊全局模塊的按鈕，查看控制臺輸出, 發(fā)現(xiàn)輸出了兩次：

說明在模塊當中定義與全局相同的 mutations 方法是可以的。

??注意：

• 多個模塊的mutations中可以出現(xiàn)同名的方法
• 多個同名的方法不會覆蓋, 會放到數(shù)組中然后依次執(zhí)行

actions

看了 mutations，接下來我們來看看 actions 能不能定義與全局相同的方法呢？

我們在全局當中定義了一個 asyncChangeGlobalName 方法，然后在模塊當中也定義了一個 asyncChangeGlobalName 方法。

全局：

asyncChangeGlobalName({commit}, payload) {
    console.log("全局中的asyncChangeGlobalName");
    setTimeout(() => {
        commit('changeGlobalName', payload);
    }, 1000);
}

模塊：

asyncChangeGlobalName({commit}, payload) {
    console.log("home中的asyncChangeGlobalName");
    setTimeout(() => {
        commit('changeGlobalName', payload);
    }, 1000);
}

返回瀏覽器，點擊全局模塊的按鈕，查看控制臺輸出, 發(fā)現(xiàn)輸出了兩次：

說明在模塊當中定義與全局相同的 actions 方法是可以的。

??注意：

• 多個模塊的actions中可以出現(xiàn)同名的方法
• 多個同名的方法不會覆蓋, 會放到數(shù)組中然后依次執(zhí)行

總結(jié)

好了，這里我們就知道了在模塊化當中，如果定義了與全局相同的屬性名稱，是沒有問題的，但是如果定義了與全局相同的 getters 方法，那么就會報錯，但是如果定義了與全局相同的 mutations/actions 方法，那么就會將這些方法放到一個數(shù)組當中，然后依次執(zhí)行。

知道了這些之后，我們就可以實現(xiàn) module 模塊化了。

總結(jié)

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

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