前言

好，經過上一篇的介紹，實現了 Vuex 當中的 actions 方法，接下來我們來實現 Vuex 當中的模塊化共享數據（modules）。

modules 方法用于模塊化共享數據，那么什么叫模塊化共享數據呢？其實非常簡單。

過去我們將所有模塊的數據都放到 state *享，例如：

我們有三個模塊 首頁 / 個人中心 / 登錄，那么我們就會將這三個模塊的數據都放到 state 中，但是這樣會導致命名匱乏的問題。

比如說首頁中需要共享name, 個人中心中也需要共享name / 登錄中也需要共享name，并且這三個name的取值還不一樣, 那么為了能把這三條數據放到同一個state中, 我們就必須指定不同的名稱, 例如:

state:{
    homeName: 'www',
    accountName: 'BNTang',
    loginName: 'top'
}

這樣就會導致命名匱乏的問題，而且如果我們的項目足夠大，那么我們的 state 中就會有很多的數據，這樣就會導致我們的 state 中的數據非常多，而且不好管理。

為了解決這個問題，Vuex 就推出了模塊化共享數據的方法，那么什么叫模塊化共享數據呢？模塊化共享數據就是將不同模塊的數據放到不同的模塊（state）中，這個就是模塊化共享數據。

那么模塊化共享數據怎么做呢，我們先不要管怎么做，我們先來看看模塊化共享數據的好處。

我們還是拿上面的例子來說，我們有三個模塊 首頁 / 個人中心 / 登錄，那么我們就會將這三個模塊的數據都放到 state 中，但是這樣會導致命名匱乏的問題。

好，到這里我們已經知道了模塊化共享數據的好處，我們先來用一下模塊化共享數據。

我先不管三七二十一，我在 Store 對象的 store 中定義了一個全局的數據 globalName 取值為 BNTang，

定義完畢之后呢，這個 globalName 代表著全局的數據，那么我們就可以在任何一個模塊當中使用這個數據，那么接下來怎么辦，例如這個時候我有兩個模塊分別是首頁與個人中心，這兩個模塊中分別有一個 name 數據，這兩個 name 該如何做呢，好我先寫代碼再來解釋。

let home = {
    state: {
        name: '首頁'
    },
    getters: {},
    mutations: {},
    actions: {}
}

如上的代碼和 Store 中有一套相同的結構，這個對象中保存著首頁的 name，保存完畢了之后，還沒添加到 Store 中，那么如何添加到 Store 中呢，其實很簡單，我們只需要在 Store 中的 modules 中添加這個模塊就可以了。

modules: {
    home: home
}

如上代碼的寫法就代表著，我們 Store 除了保存了全局的共享數據以外還保存了首頁模塊的共享數據，那么我們的個人中心數據該如何做呢，其實也是一樣的（也是同一個世界，同一個夢想的），我們來寫一個個人中心的模塊。

let account = {
    state: {
        name: '賬戶'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后將這個模塊添加到 Store 中，方式和上面一樣。

modules: {
    home: home,
    account: account
}

好了，到這里我們已經定義了全局共享的數據，與各個模塊的共享數據，我們保存歸保存，但是我們怎么使用呢，我們來看看。

拿全局共享的數據（隨機找一個組件展示數據即可）：

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

拿首頁的共享數據（隨機找一個組件展示數據即可）：

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

拿個人中心的共享數據（隨機找一個組件展示數據即可）：

<p>{{ this.$store.state.account.name }}</p>

測試效果我不貼圖了本人親自測試過，有個 注意點，我們的 Nuex 還沒有實現模塊化，所以在測試的時候記得將自己實現的 Nuex 注釋掉，打開官方的 Vuex。

到這里，我們的頁面就已經展示了全局共享數據與模塊化共享數據，完成了將不同模塊的數據放到不同的模塊（state）中，這個就是模塊化共享數據。

模塊化中 getters/mutations/actions 的使用

我們知道在 Store 當中，我們可以使用 getters/mutations/actions 這三個方法，那么這三個方法在模塊化當中是怎么使用的呢，先看全局的，在全局 Store 分別在這三個方法中定義方法，如下：

getters: {
    getGlobalName(state) {
        return state.globalName + '111111';
    }
},
mutations: {
    changeGlobalName(state, payload) {
        state.globalName += payload;
    }
},
actions: {
    asyncChangeGlobalName({commit}, payload) {
        setTimeout(() => {
            commit('changeGlobalName', payload);
        }, 1000);
    }
},

內容非常的簡單，如果是從之前的文章一步一步跟著來的再看如上的代碼基本上沒有什么壓力（我這里不做過多的解釋，因為前面講解的很細，不懂的可以回去翻看之前章節的介紹），然后我們在組件當中使用這三個方法，如下：

<template>
  <div class="hello">
    <p>{{ this.$store.state.globalName }}</p>
    <p>{{ this.$store.getters.getGlobalName }}</p>
    <button @click="globalFn1">同步操作</button>
    <button @click="globalFn2">異步操作</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    globalFn1() {
      this.$store.commit('changeGlobalName', 10);
    },
    globalFn2() {
      this.$store.dispatch('asyncChangeGlobalName', 5);
    }
  }
}
</script>
<style scoped>
</style>

關于測試自行測試，這里不做過多的解釋(運行項目，點擊頁面上面的按鈕即可查詢效果)。

好了這里我們已經知道了全局的 getters/mutations/actions 的使用，那么模塊化當中的 getters/mutations/actions 的使用又是怎么樣的呢，我們來看看。

我先不管三七二十一，我在 home 模塊中的 getters/mutations/actions 中定義方法，如下：

首頁模塊：

getters: {
    getHomeName(state) {
        return state.name + '222222';
    }
},
mutations: {
    changeHomeName(state, payload) {
        state.name += payload;
    }
},
actions: {
    asyncChangeHomeName({commit}, payload) {
        setTimeout(() => {
            commit('changeHomeName', payload);
        }, 1000);
    }
}

我這個時候想，我在全局 Store 的 getters/mutations/actions 方法中定義了方法，可以和之前的方式一樣使用，那么在模塊中的 getters/mutations/actions 方法中定義了方法，我能不能和之前的方式一樣使用呢，我們來看看。

首先展示首頁模塊中的 name, 如果這里直接和之前一樣的寫法肯定是不能展示的，所以這里我就要提到一個注意點：如果獲取的是模塊中state共享的數據, 那么需要加上模塊的名稱

知道了這個注意點之后，我們的代碼就可以改寫為如下的方式來展示模塊中 store 存儲的數據，代碼如下：

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

上面這一點是我們在使用模塊化共享數據的時候需要注意的，與尋常的使用方式不同，需要加上模塊的名稱。

那么我們從 getters/mutations/actions 中獲取數據呢，如果獲取的是模塊中getters共享的數據, 那么不需要加上模塊的名稱，代碼如下：

<p>{{ this.$store.getters.getHomeName }}</p>

mutation 與 action 與使用全局的方式一樣，不需要加上模塊的名稱, 在頁面編寫兩個按鈕，一個是同步，一個是異步，在分別實現下各個按鈕的點擊事件即可, 代碼如下：

添加按鈕：

<button @click="homeFn1">同步操作</button>
<button @click="homeFn2">異步操作</button>

實現方法：

homeFn1() {
  this.$store.commit('changeHomeName', 10);
},
homeFn2() {
  this.$store.dispatch('asyncChangeHomeName', 5);
}

好了，我們首頁模塊的 getters/mutations/actions 的使用代碼編寫好了，我們趕緊趁熱來測試一下，看看我們的代碼是否能夠正常的運行，打開瀏覽器點擊按鈕即可完成測試我這里略過。

首頁模塊的我們編寫完畢了，接著來編寫個人中心模塊的 getters/mutations/actions 的使用，其實和首頁模塊的 getters/mutations/actions 的使用是一樣的，我們來看看，為了節約時間，我直接貼代碼：

個人中心模塊：

let account = {
    state: {
        name: '賬戶'
    },
    getters: {
        getAccountName(state) {
            return state.name + '333333';
        }
    },
    mutations: {
        changeAccountName(state, payload) {
            state.name += payload;
        }
    },
    actions: {
        asyncChangeAccountName({commit}, payload) {
            setTimeout(() => {
                commit('changeAccountName', payload);
            }, 1000);
        }
    }
}

頁面展示：

<p>{{ this.$store.state.account.name }}</p>
<p>{{ this.$store.getters.getAccountName }}</p>
<button @click="accountFn1">同步操作</button>
<button @click="accountFn2">異步操作</button>

實現方法：

accountFn1() {
  this.$store.commit('changeAccountName', 10);
},
accountFn2() {
  this.$store.dispatch('asyncChangeAccountName', 5);
}

好了，到這里我們的模塊化當中的 getters/mutations/actions 的使用就已經完成了。

其實除了在全局的 Store 中添加子模塊，子模塊還可以添加模塊，可以無限的這樣添加模塊，例如我現在有一個登陸模塊，我將登陸模塊添加到 account 模塊中，登陸模塊的代碼如下：

let login = {
    state: {
        name: '登錄'
    },
    getters: {
        getLoginName(state) {
            return state.name + '333333';
        }
    },
    mutations: {
        changeLoginName(state, payload) {
            state.name += payload;
        }
    },
    actions: {
        asyncChangeLoginName({commit}, payload) {
            setTimeout(() => {
                commit('changeLoginName', payload);
            }, 1000);
        }
    }
}

然后將登陸模塊添加到 account 模塊中，代碼如下：

modules: {
    login: login
}

然后我們在頁面中展示登陸模塊的數據，代碼如下：

<p>{{ this.$store.state.account.login.name }}</p>
<p>{{ this.$store.getters.getLoginName }}</p>

展示數據的注意點與之前一樣，需要加上模塊的名稱，而 getters 就不需要加上模塊的名稱，然后我們在頁面中調用登陸模塊的 mutations/actions 的方法，代碼如下：

首先是觸發按鈕：

<button @click="loginFn1">同步操作</button>
<button @click="loginFn2">異步操作</button>

然后是實現方法：

loginFn1() {
  this.$store.commit('changeLoginName', 10);
},
loginFn2() {
  this.$store.dispatch('asyncChangeLoginName', 5);
}

好了，到這里我們的模塊化的使用就已經完成了，我們趕緊來測試一下，看看我們的代碼是否能夠正常的運行，打開瀏覽器點擊按鈕即可完成測試我這里略過。

總結

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

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