手撕Vuex-模組化共享資料下

BNTang發表於2023-11-05
Vue

前言

好，經過上一篇的介紹，瞭解了 Vuex 當中的模組化，本章主要介紹 Vuex 當中的模組化共享資料下篇。

我們知道在全域性的 Store 物件當中，我們可以定義全域性的資料，那麼如果我們在模組當中也定義了一個屬性名稱和全域性的屬性名稱相同，那麼會發生什麼呢？

我們先來看看，在全域性當中定義了一個 globalName 屬性，然後在模組當中也定義了一個 globalName 屬性：

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

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

執行專案，檢視控制檯是沒有任何錯誤資訊的，說明在模組當中定義與全域性相同的屬性名稱是沒有問題的。

看了共享資料，接下來我們來看看 getters/mutations/actions 能不能定義與全域性相同的方法呢？

getters

我們先來看看 getters，我們在全域性當中定義了一個 getGlobalName 方法，然後在模組當中也定義了一個 getGlobalName 方法：

返回瀏覽器，檢視控制檯輸出了一個錯誤資訊：

[vuex] duplicate getter key: getGlobalName

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

❗️注意：多個模組中不能出現同名的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;
}

返回瀏覽器，點選全域性模組的按鈕，檢視控制檯輸出, 發現輸出了兩次：

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

❗️注意：

  • 多個模組的mutations中可以出現同名的方法
  • 多個同名的方法不會覆蓋, 會放到陣列中然後依次執行

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);
}

返回瀏覽器，點選全域性模組的按鈕，檢視控制檯輸出, 發現輸出了兩次：

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

❗️注意：

  • 多個模組的actions中可以出現同名的方法
  • 多個同名的方法不會覆蓋, 會放到陣列中然後依次執行

總結

好了，這裡我們就知道了在模組化當中，如果定義了與全域性相同的屬性名稱，是沒有問題的，但是如果定義了與全域性相同的 getters 方法，那麼就會報錯，但是如果定義了與全域性相同的 mutations/actions 方法，那麼就會將這些方法放到一個陣列當中，然後依次執行。

知道了這些之後，我們就可以實現 module 模組化了。

相關文章