深入理解Vuex 模块化(module)
Vuex 模块化是指将Vuex Store分割成多个模块，每个模块拥有自己的状态、mutation、action、getter等，通过这种方式可以更好地组织和维护项目中的状态树。下面是对Vuex 模块化的详细介绍：
一、为什么需要模块化？
在大型项目中，如果所有的状态都集中在一起，会得到一个比较大的对象，进而显得臃肿，难以维护。因此，Vuex允许我们将store分割成模块，每个模块有自己的状态、mutation、action、getter等，通过这种方式可以更好地组织和维护项目中的状态树。
二、模块的局部状态
在模块内部，mutation和getter接收的第一参数（state）是模块的局部状态对象，而不是rootState。在模块内部，可以使用局部状态对象来访问和修改状态。例如：
const moduleA = {
state: { count: 0},
mutations: {
increment (state) {
state.count++
}
},
getters: {
doubleCount (state, getters, rootState) {
return state.count * 2
}
},
actions: {
incremtnIfOddRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
三、命名空间
在模块内部，action、mutation、getter是注册在全局命名空间的。如果你在moduleA和moduleB里分别声明了命名相同的action或者mutation或者getter， 当你使用store.commit('some')，A和B模块会同时响应。为了解决这个问题，可以添加namespaced: true的方式，使其成为命名空间模块。
例如：
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
state: {...},
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,
getters: {
popular () {...} // getters['account/posts/popular']
}
}
}
}
}
})
通过这种方式，可以使模块更加自包含和提高可重用性，同时也可以避免命名冲突的问题。
