VUE框架CLI组件化VueX模块化开发使用map实现自动生成代码------VUE框架

import Vue from "vue";
import Vuex from "vuex";
 
Vue.use(Vuex);
 
const a = {
    namespaced : true,
    actions : {
        doA1(){
            console.log("AAAA1");
        }
    },
    mutations : {
        doA2(){
            console.log("AAAA2");
        }
    },
    state : {
        A : 1
    },
    getters : {
        computedA(){
            return 1;
        }
    }
};
 
const b = {
    namespaced : true,
    actions : {
        doB1(){
            console.log("BBBB1");
        }
    },
    mutations : {
        doB2(){
            console.log("BBBB2");
        }
    },
    state : {  
        B : 1
    },
    getters : {
        computedB(){
            return 1;
        }
    }
};
 
export default new Vuex.Store({
    modules : {
        ModuleA : a,
        ModuleB : b
    }
});

<template>
    <div>
        <h1>我是A</h1>
        <button @click="doA1()">actions</button>
        <button @click="doA2()">mutations</button>
        <h3>state : {{ A }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ computedA }}</h3>
    </div>
</template>
 
<script>
    import {mapState,mapActions,mapGetters,mapMutations} from "vuex";
    export default {
        name : "A",
        computed : {
            // A(){
            //     return this.$store.state.A;
            // },
            // ...mapState({A : "A"}),
            ...mapState("ModuleA",["A"]),
            // computedA(){
            //     return this.$store.getters["computedA"];
            // }
            ...mapGetters("ModuleA",{computedA : "computedA"})
            // ...mapGetters(["computedA"])
        },
        methods : {
            // doA1(){
            //     // 开启命名空间之后需要指明
            //     this.$store.dispatch("doA1");
            // },
            // ...mapActions(["doA1"]),
            ...mapActions("ModuleA",{doA1 : "doA1"}),
            // doA2(){
            //     // 开启命名空间之后需要指明
            //     this.$store.commit("doA2");
            // }
            // ...mapMutations(["doA2"])
            ...mapMutations("ModuleA",{doA2 : "doA2"})
        }
    }
</script>
 
<style>
 
</style>

<template>
    <div>
        <h1>我是B</h1>
        <button @click="doB1()">actions</button>
        <button @click="doB2()">mutations</button>
        <h3>state : {{ B }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ computedB }}</h3>
    </div>
</template>
 
<script>
    import {mapState,mapActions,mapMutations,mapGetters} from "vuex";
    export default {
        name : "B",
        computed : {
            // B(){
            //     return this.$store.state.ModuleB.B;
            // }
            ...mapState("ModuleB",{B : "B"}),
            // ...mapState("ModuleB",["B"])
            ...mapGetters("ModuleB",["computedB"])
        },
        methods : {
            // doB1(){
            //     // 开启命名空间之后需要指明
            //     this.$store.dispatch("ModuleB/doB1");
            // },
            // doB2(){
            //     // 开启命名空间之后需要指明
            //     this.$store.commit("ModuleB/doB2");
            // }
            ...mapActions("ModuleB",["doB1"]),
            ...mapMutations("ModuleB",["doB2"])
        }
    }
</script>
 
<style>
 
</style>