随着项目越来越复杂,我们可能向store中添加的状态越来越多,这不便于我们对数据的管理,同时,既然vue是模块化开发,那么我们能否将Vuex中的状态也进行模块化管理呢?
Vuex——Module
Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
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 的状态
值得注意的是,这里两份模块的state写法state: () => ({ ... })
,这里通过函数来返回了一个state对象。如果我们不这样写,而是使用一个纯对象来声明模块的状态,那么这个状态对象就会通过引用被共享,导致状态动向被修改时store或模块间数据互相污染的问题。实际上,这和Vue组件内的date类似,它也是使用了一个函数。
但是,模块化store对象之后,如果将所有的内容都写在一个store.js中,就显得过于臃肿,我们难以快速定位数据,这时候,我