一、為什么需要模塊化

前面我們講到的例子都在一個(gè)狀態(tài)樹里進(jìn)行，當(dāng)一個(gè)項(xiàng)目比較大時(shí)，所有的狀態(tài)都集中在一起會(huì)得到一個(gè)比較大的對(duì)象，進(jìn)而顯得臃腫，難以維護(hù)。為了解決這個(gè)問(wèn)題，Vuex允許我們將store分割成模塊（module），每個(gè)module有自己的state，mutation，action，getter，甚至還可以往下嵌套模塊，下面我們看一個(gè)典型的模塊化例子

const moduleA = { state: {....}, mutations: {....}, actions: {....}, getters: {....}}const moduleB = { state: {....}, mutations: {....}, actions: {....}, getters: {....}}const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }})store.state.a // moduleA的狀態(tài)store.state.b // moduleB的狀態(tài)

二、模塊的局部狀態(tài)

模塊內(nèi)部的mutation和getter，接收的第一參數(shù)（state）是模塊的局部狀態(tài)對(duì)象,rootState

const moduleA = { state: { count: 0}, mutations: { increment (state) {  // state是模塊的局部狀態(tài)，也就是上面的state  state.count++ } }, getters: { doubleCount (state, getters, rootState) {  // 參數(shù) state為當(dāng)前局部狀態(tài)，rootState為根節(jié)點(diǎn)狀態(tài)  return state.count * 2 } }, actions: { incremtnIfOddRootSum ( { state, commit, rootState } ) {  // 參數(shù) state為當(dāng)前局部狀態(tài)，rootState為根節(jié)點(diǎn)狀態(tài)  if ((state.cont + rootState.count) % 2 === 1) {  commit('increment')  } } }}

三、命名空間（這里一定要看，不然有些時(shí)候會(huì)被坑）

上面所有的例子中，模塊內(nèi)部的action、mutation、getter是注冊(cè)在全局命名空間的，如果你在moduleA和moduleB里分別聲明了命名相同的action或者mutation或者getter（叫some），當(dāng)你使用store.commit('some')，A和B模塊會(huì)同時(shí)響應(yīng)。所以，如果你希望你的模塊更加自包含和提高可重用性，你可以添加namespaced: true的方式，使其成為命名空間模塊。當(dāng)模塊被注冊(cè)后，它的所有g(shù)etter，action，mutation都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)用整個(gè)命名，例如：

const store = new Vuex.Store({ modules: { account: {  namespaced: true,  state: {...}, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的，namespaced不會(huì)有影響  getters: {  // 每一條注釋為調(diào)用方法  isAdmin () { ... } // getters['account/isAdmin']  },  actions: {  login () {...} // dispatch('account/login')  },  mutations: {  login () {...} // commit('account/login')  },  modules: {  // 繼承父模塊的命名空間  myPage : {   state: {...},   getters: {   profile () {...}  // getters['account/profile']   }  },  posts: { // 進(jìn)一步嵌套命名空間   namespaced: true,   getters: {   popular () {...} // getters['account/posts/popular']   }  }  } } }})

啟用了命名空間的getter和action會(huì)收到局部化的getter，dispatch和commit。你在使用模塊內(nèi)容時(shí)不需要再同一模塊內(nèi)添加空間名前綴，更改namespaced屬性后不需要修改模塊內(nèi)的代碼。