由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment (state) {
state.count++
}
},
actions: {
actionAdd(context) {
context.commit('increment')
}
}
}
const store = new Vuex.Store({
modules: {
moduleA
}
})
export default store
读取状态
<template>
<div>
{{ count }}
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
count() {
return this.$store.state.moduleA.count;
}
}
};
</script>
或者,使用 mapState 辅助函数帮助我们生成计算属性
<script>
import { mapState } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapState({
count: (state) => state.moduleA.count,
}),
},
};
</script>
除了 state 是分模块的,其他 mutations 和 actions 都不分模块
<template>
<div>
{{ count }}
<p><button @click="actionAdd">+</button></p>
</div>
</template>
import { mapState } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapState({
count: (state) => state.moduleA.count,
}),
},
methods: {
actionAdd() {
this.$store.commit("increment");
}
},
};
</script>
或者,使用 mapActions 辅助函数
<script>
import { mapActions , mapState } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapState({
count: (state) => state.moduleA.count,
}),
},
methods: {
...mapActions([
"actionAdd"
])
},
};
</script>