VUE框架CLI组件化VueX与map------VUE框架

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

<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(["A"]),
            // computedA(){
            //     return this.$store.getters["computedA"];
            // }
            ...mapGetters({computedA : "computedA"})
            // ...mapGetters(["computedA"])
        },
        methods : {
            // doA1(){
            //     // 开启命名空间之后需要指明
            //     this.$store.dispatch("doA1");
            // },
            // ...mapActions(["doA1"]),
            ...mapActions({doA1 : "doA1"}),
            // doA2(){
            //     // 开启命名空间之后需要指明
            //     this.$store.commit("doA2");
            // }
            // ...mapMutations(["doA2"])
            ...mapMutations({doA2 : "doA2"})
        }
    }
</script>
 
<style>
 
</style>

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