-
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。
-
弊端1：不同模块中有相同命名的mutations、actions时，不同模块对同一 mutation 或 action 作出响应。
-
弊端2：当一个项目中store分了很多模块的时候，在使用辅助函数mapState、mapGetters、mapMutations、mapActions时，很难查询，引用的state、getters、mutations、actions来自于哪个模块，不便于后期维护。
-
解决:可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action
及 mutation 都会自动根据模块注册的路径调整命名。
开始
- 目录结构
- main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.store-index.js
import Vue from 'vue'
import Vuex from 'vuex'
import cat from './cat/index.js'
import dog from './dog/index.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
cat,
dog
}
})
4.cat.js
export default {
namespaced: true,
// 局部状态
state: {
name: "蓝白英短",
age: 1
},
// 局部读取
getters: {
desc: state => "宠物：" + state.name
},
// 局部变化
mutations: {
increment(state, payload) {
state.age += payload.num;
}
},
// 局部动作
actions: {
grow(context, payload) {
setTimeout(() => {
context.commit("increment", payload);
}, 1000);
}
}
};
5 dog.js
export default {
namespaced: true,
// 局部状态
state: {
name: "拉布拉多",
age: 1
},
// 局部读取
getters: {
desc: state => "宠物：" + state.name
},
// 局部变化
mutations: {
increment(state, payload) {
state.age += payload.num;
}
},
// 局部动作
actions: {
grow(context, payload) {
setTimeout(() => {
context.commit("increment", payload);
}, 1000);
}
}
};
- 导入方式
导入方式一 ：
// 1. 导入辅助函数mapState
import {
mapState } from "vuex";
export default {
props: {
computed: {
//2. 在辅助函数mapState的第一参数上，填写上模块的命名空间名。根据挂载方式不同，此处的命名空间名就是 wechatType 或 aaa。
...mapState('cat', ["name",age])
//或者
...mapState("cat", {
catName: "name", //自己命名
catAge: "age" //自己命名
}),
},
导入方式二
//通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。
//它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
import {
createNamespacedHelpers } from "vuex";
const {
mapState } = createNamespacedHelpers('cat')
export default {
computed: {
...mapState(['name','age'])
}
｝
- vuex.vue
<template>
<div class="hello">
<h3>Vuex状态树</h3>
<div>{
{
this.$store.state}}</div>
<h3>{
{
name}}</h3>
<h3>{
{
age}}</h3>
<!-- <h3>{
{
desc}}</h3> -->
<h3 @click="catMutations">cat-Mutations</h3>
<h3 @click="catActions">cat-长大了</h3>
<h3>mapState</h3>
<!-- <div>{
{
catName}} {
{
catAge}}</div> -->
<div>{
{
dogName}} {
{
dogAge}}</div>
<h3>mapGetters</h3>
<div>{
{
catDesc}}</div>
<div>{
{
dogDesc}}</div>
<h3>mapMutations</h3>
<button @click="catIncrement({num:1})">猫变化</button>
<button @click="dogIncrement({num:1})">狗变化</button>
<h3>mapActions</h3>
<button @click="catGrow({num:1})">猫动作</button>
<button @click="dogGrow({num:1})">狗动作</button>
</div>
</template>
<script>
import {
mapState, mapGetters, mapMutations, mapActions } from "vuex";
// import { createNamespacedHelpers } from "vuex";
// const { mapState,mapMutations,mapGetters,mapActions } = createNamespacedHelpers('cat')
export default {
name: "HelloWorld",
// computed: {
// ...mapState(['name','age']),
// ...mapGetters(['desc'])
// },
// methods: {
// ...mapMutations(['increment']),
// catMutations(){
// this.increment({num:2})
// },
// ...mapActions(['grow']),
// catActions(){
// this.grow({num:3})
// }
// }
computed: {
...mapState("cat", ['name','age']),
...mapState("dog", {
dogName: "name",
dogAge: "age"
}),
...mapGetters("cat", {
catDesc: "desc"
}),
...mapGetters("dog", {
dogDesc: "desc"
})
},
methods: {
...mapMutations("cat", {
catIncrement: "increment" }),
...mapMutations("dog", {
dogIncrement: "increment" }),
...mapActions("cat", {
catGrow: "grow" }),
...mapActions("dog", {
dogGrow: "grow" })
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
**
特别感谢两篇博客让我对vuex-module-命名空间有更深层次的理解 如果不对请指正，谢谢
**
https://www.cnblogs.com/sea-breeze/p/11321961.html --沙滩海风
Vuex模块：开启命名空间
https://www.cnblogs.com/guojbing/p/10852362.html --___冰