Vue-55、Vue技术vuex模块化

一、代码

1、store.js

//改文件用于创建最为核心的store
//引入vue
import Vue from "vue";
//引入vuex
import Vuex from 'vuex';//求和功能相关的配置
const  countOptions={namespaced:true,actions:{jia:function (context,value) {console.log('action中的jia被调用了',context,value);context.commit('JIA',value)},jiaWait:function(context,value){console.log('action中的jia被调用了',context,value);context.commit('JIAWAIT',value)},jian:function (context,value) {context.commit('JIAN',value);},SumOdd:function (context,value) {context.commit('SUMODD',value)},},mutations:{JIA(state,value){console.log('mutation中的JIA被调用了',state,value);state.sum += value;},JIAN(state,value){state.sum -= value;},SUMODD(state,value){if (state.sum % 2){state.sum += value;}},JIAWAIT(state,value){setTimeout(()=>{state.sum += value;},500)},},state:{sum:0, //当前的和school:'清华',subject:'技术',},getters:{bigSum(state){return state.sum*10;},},
};
//人员管理相关配置
const  personOptions={namespaced:true,actions:{addPersonWang(context,value){if (value.name.indexOf('王')===0) {context.commit('ADD_PERSON',value);}else {alert("添加的人不姓王")}}},mutations:{ADD_PERSON(state,value){state.personList.unshift(value);}},state:{personList:[{id:'001',name:'张三'}]},getters:{personNum(state){return state.personList.length},firstPersonName(state){return state.personList[0].name}},
};
//使用
Vue.use(Vuex);
//创建store
const store = new Vuex.Store({modules:{countOptions,personOptions}
});
//暴露store
export default store;

2、Count.vue

<template><div ><h1>当前求和为：{{sum}}</h1><h1>当前求和放大10倍为:{{bigSum}}</h1><h3>我在{{school}},学习{{subject}}</h3><select v-model.number="number"><option value="1">1</option><option value="2">2</option><option  value="3">3</option></select><br><button @click="addSum(number)">+</button><button @click="reduceSum(number)">-</button><button @click="addSumOdd(number)">当前和为奇数再加</button><button @click="addSumWait(number)">等等在加</button><h1>下方组件人员数量{{personNum}}</h1></div>
</template>
<script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name: "Count",data(){return{number:1,}},computed:{...mapState('countOptions',['sum','school','subject']),...mapGetters('countOptions',['bigSum']),...mapGetters('personOptions',['personNum']),},methods:{...mapMutations('countOptions',{addSum:'JIA',reduceSum:'JIAN'}),...mapActions('countOptions',{addSumOdd:'SumOdd',addSumWait:'jiaWait'})},}
</script>
<style scoped>button{margin-left: 5px;}
</style>

3、Person.vue

<template><div><h1>上方组件的和为：{{sum}}</h1><h1>人员列表</h1><h3>列表中第一个人的名字是：{{firstPersonName}}</h3><input type="text" placeholder="请输入名字" v-model="personName"><button  @click="addPerson">添加</button><button  @click="addPersonWang">添加一个姓王的人</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template>
<script>import {mapState,mapMutations} from 'vuex';import  {nanoid}  from 'nanoid';export default {name: "Person",data(){return{personName:'',}},computed:{...mapState('countOptions',['sum']),...mapState('personOptions',['personList']),firstPersonName(){return this.$store.getters['personOptions/firstPersonName']}},methods:{// ...mapMutations({addPerson:'ADD_PERSON'})addPerson(){if (this.personName.trim()=='') {alert('输入不能为空');}else {this.$store.commit('personOptions/ADD_PERSON',{id:nanoid(),name:this.personName.trim()});this.personName = '';}},addPersonWang(){this.$store.dispatch('personOptions/addPersonWang',{id:nanoid(),name:this.personName});this.personName = '';}}}
</script><style scoped></style>

二、总结
1、目的：让代码更好维护，让多种分类更加明确

2、修改store.js

const  countOptions={namespaced:true,actions:{......},mutations:{......},state:{sum:0, //当前的和school:'清华',subject:'技术',},getters:{bigSum(state){return state.sum*10;},},
};const  personOptions={namespaced:true,actions:{......},mutations:{......},state:{personList:[{id:'001',name:'张三'}]},getters:{personNum(state){return state.personList.length},firstPersonName(state){return state.personList[0].name}},
};
//使用
Vue.use(Vuex);
//创建store
const store = new Vuex.Store({modules:{countOptions,personOptions}
});
//暴露store
export default store;

3、开启命名空间后，组件中读取state数据

//方式一：自己读取
this.$store,state.personOptions.personList
//方式二：借助mapState读取
...mapState('countOptions',['sum','school','subject']),

4、开启命名空间后，组件中读取getters数据：

//方式一：自己读取
this.$store.getters['personOptions/firstPersonName']
//方式二：借助mapGetters读取
...mapGetters('countOptions',['bigSum']),

5、开启命名空间后，组件中调用dispatch

//方式一：自己调用
this.$store.dispatch('personOptions/addPersonWang',{id:nanoid(),name:this.personName});
//方式二：借助mapActions读取...mapActions('countOptions',{addSumOdd:'SumOdd',addSumWait:'jiaWait'})

6、开启命名空间后，组件中调用commit

//方式一：自己调用
this.$store.commit('personOptions/ADD_PERSON',{id:nanoid(),name:this.personName.trim()});
//方式二：借助mapMutations读取
...mapMutations('countOptions',{addSum:'JIA',reduceSum:'JIAN'}),