## 一、概述 由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。 為了解決以上問題，Vuex 允許我們將 store 分割成**模塊（module）**。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割： ~~~js const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的狀態 store.state.b // -> moduleB 的狀態 ~~~ ## 二、命名空間 默認情況下，模塊內部的 action、mutation 和 getter 是注冊在**全局命名空間**的——這樣使得多個模塊能夠對同一 mutation 或 action 作出響應。 如果希望你的模塊具有更高的封裝度和復用性，你可以通過添加`namespaced: true`的方式使其成為帶命名空間的模塊。當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據模塊注冊的路徑調整命名。 ``` const store = new Vuex.Store({ modules: { account: { namespaced: true, // 模塊內容（module assets） state: { ... }, // 模塊內的狀態已經是嵌套的了，使用 `namespaced` 屬性不會對其產生影響 getters: { isAdmin () { ... } // -> getters['account/isAdmin'] }, actions: { login () { ... } // -> dispatch('account/login') }, mutations: { login () { ... } // -> commit('account/login') }, // 嵌套模塊 modules: { // 繼承父模塊的命名空間 myPage: { state: { ... }, getters: { profile () { ... } // -> getters['account/profile'] } }, // 進一步嵌套命名空間 posts: { namespaced: true, state: { ... }, getters: { popular () { ... } // -> getters['account/posts/popular'] } } } } } }) ```