深入理解Vuex Modules

由於Vue在前端開發中的不斷普及和廣泛應用，應運而生的Vuex在全局狀態管理上面提供了非常好的解決方案。在Vuex中，我們可以把應用中的狀態集中到一個全局的存儲區域並通過一些簡單的規則來保證狀態更改的可追蹤、可維護和可擴展。

一、Vuex Modules的概念

在Vuex官方文檔裡面，對Module的定義是這樣描述的：

一個 store 就是一個倉庫，它的作用是管理共享狀態並記錄狀態的變更。一個 store 裡面包含着多個模塊（module），也就是 Vuex 中的 Module。而每個模塊都擁有自己的 state、mutation、action、getter。

可以理解為：模塊就是Stroe裡面的Store，是一個獨立的、有狀態管理的倉庫。

將大型應用程序拆分成小型接受管理的模塊，可以有效提升代碼的可維護性和可讀性。通過組合各種模塊，形成需要的Store，這樣就可以使用多個存儲區域來管理應用程序的全局狀態。

二、創建Vuex Modules

我們可以通過Vuex的核心對象store去創建我們自己的Modules，然後通過組合形成一個完整的Store。

舉個栗子，比如我們的應用程序，需要分別管理一個主題和用戶的狀態。那麼我們可以把他們分別拆分成兩個模塊去管理。

// theme module const theme = { state: { currentTheme: 'light' }, mutations: { setCurrentTheme (state, value) { state.currentTheme = value } }, actions: { setTheme ({ commit }, value) { commit('setCurrentTheme', value) } } } // user module const user = { state: { currentUser: null }, mutations: { setCurrentUser (state, value) { state.currentUser = value } }, actions: { setUser ({ commit }, value) { commit('setCurrentUser', value) } } } // create store with modules const store = new Vuex.Store({ modules: { theme, user } })

通過上面的代碼，我們可以得知theme和user是兩個獨立的模塊，它們分別管理自己的狀態。然後我們把這兩個模塊通過modules選項傳遞進Vuex Store中，就可以創建一個完整的Store了。

三、Vuex Modules的Namespace

如果我們有多個模塊管理相同的狀態，那麼在調用State或Action的時候，就會出現命名衝突。這個時候Vuex提供了一個很好的解決方案，那就是Namespace。

通過Namespace，我們可以給每個Module添加命名空間，來避免命名衝突。那麼，我們如何為Module添加Namespace呢？請看下面的代碼：

// theme module const theme = { namespaced: true, state: { currentTheme: 'light' }, mutations: { setCurrentTheme (state, value) { state.currentTheme = value } }, actions: { setTheme ({ commit }, value) { commit('setCurrentTheme', value) } } } // user module const user = { namespaced: true, state: { currentUser: null }, mutations: { setCurrentUser (state, value) { state.currentUser = value } }, actions: { setUser ({ commit }, value) { commit('setCurrentUser', value) } } } // create store with modules const store = new Vuex.Store({ modules: { theme, user } })

在上面的代碼中，我們為每個Module設置了namespaced的屬性為true，這樣我們定義在該Module中的Action、Mutation、Getter和State才會成為全局命名空間裡面的子命名空間，然後我們就可以通過模塊名來訪問相應的State或執行相應的Action了。

舉個例子：

// Assigning State of theme module console.log(store.state.theme.currentTheme); // Assigning State of user module console.log(store.state.user.currentUser); // Dispatching Action of theme module store.dispatch('theme/setTheme', 'dark'); // Committing Mutation of user module store.commit('user/setCurrentUser', { name: 'Tom', age: 18 });

通過上面的代碼，我們可以看到Vuex是如何管理這些Namespace的。直截了當，容易理解。

四、在組件中使用Vuex Modules

在組件中使用Vuex Modules，有兩個方法，一個是通過MapState、MapMutations、MapGetters、MapActions簡化代碼，另一個是通過$this.$store來實現。

通過MapState、MapMutations、MapGetters、MapActions簡化代碼的思路，是通過綁定的變量名來讓Vue知道哪些變量應該綁定到這個組件實例的屬性上。

首先我們看通過MapState綁定State的方法：

<template> <div> <h2>Theme: {{currentTheme}}</h2> <button @click="setDark">Set Dark</button> </div> </template> <script> import { mapState } from 'vuex'; export default { computed: { ...mapState('theme', ['currentTheme']) }, methods: { ...mapActions('theme', ['setTheme']), setDark () { this.setTheme('dark') } } };</script>

在上面的代碼中，我們可以通過…mapState(‘theme’, [‘currentTheme’])將當前Module的state的currentTheme和組件data中的property綁定起來。這樣組件就可以直接使用this.currentTheme來訪問狀態了。

方法類似的，我們可以通過MapMutations、MapGetters、MapActions等來簡化我們的代碼。

其次，我們來看一下通過$this.$store來實現在組件中訪問Vuex State、Mutations、Actions的方法。

在組件中，可以通過Store對象的commit()和dispatch()方法來訪問state、mutation和action。可以通過$this.$store來訪問到store對象。在具體使用的時候，可以使用“命名空間 / Action名/ Mutations名”等方式來訪問相應的狀態。舉個例子：

// Assigning State of theme module console.log(this.$store.state.theme.currentTheme); // Assigning State of user module console.log(this.$store.state.user.currentUser); // Dispatching Action of theme module this.$store.dispatch('theme/setTheme', 'dark'); // Committing Mutation of user module this.$store.commit('user/setCurrentUser', { name: 'Tom', age: 18 });

可以看到，通過$this.$store屬性，我們可以很輕鬆的去訪問到任意一個Store中的State，提交Mutations，和分發Actions。

五、總結

Vuex模塊(Module)是Vuex Store中管理States、Mutations、Actions、Getters等的關鍵概念。通過解耦大型應用程序，我們可以更好的去維護和擴展我們的應用程序。

在使用Vuex模塊期間，我們會發現Namespace是非常受歡迎的概念。通過添加Namespace，可以更好的避免命名衝突，增加代碼的可讀性。

在組件中，我們可以通過MapState、MapMutations、MapGetters、MapActions、$this.$store等方式，來訪問Store中的State、Mutations和Actions。具體使用仍需視情況而定。