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'}),