VUE框架CLI组件化VueX模块化拆分模块并添加命名空间------VUE框架

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// 怎么拆分模块,VUEX建议一个功能一个模块
// 拆分成两个模块
// A业务和B业务
// a模块
const a = {
    // 开启命名空间
    namespaced : true,
    actions : {
        doA1(){
            console.log("action A1");
        }
    },
    mutations : {
        doA2(){
            console.log("mutation A2");
        }
    },
    state : {
        A : 1
    },
    getters : {
        computedA(){
            return 1;
        }
    }
};
// 两个模块一人一个对象
const b = {
    // 开启命名空间
    namespaced : true,
    actions : {
        doB1(){
            console.log("action B1");
        }
    },
    mutations : {
        doB2(){
            console.log("mutation B2");
        }
    },
    state : {
        B : 1
    },
    getters : {
        computedB(){
            return 1;
        }
    }
};

const c = {
    // 开启命名空间
    namespaced : true,
    actions : {
        doA1(){
            console.log("C的doA");
        }
    }
}

export default new Vuex.Store({
    // 模块配置
    modules : {
        // 模块名 : 模块
        ModuleA : a,
        ModuleB : b,
        ModuleC : c
    }
});

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

// 怎么拆分模块,VUEX建议一个功能一个模块

// 拆分成两个模块

// A业务和B业务

// a模块

const a = {

    // 开启命名空间

    namespaced : true,

    actions : {

        doA1(){

            console.log("action A1");

        }

    },

    mutations : {

        doA2(){

            console.log("mutation A2");

        }

    },

    state : {

        A : 1

    },

    getters : {

        computedA(){

            return 1;

        }

    }

};

// 两个模块一人一个对象

const b = {

    // 开启命名空间

    namespaced : true,

    actions : {

        doB1(){

            console.log("action B1");

        }

    },

    mutations : {

        doB2(){

            console.log("mutation B2");

        }

    },

    state : {

        B : 1

    },

    getters : {

        computedB(){

            return 1;

        }

    }

};

const c = {

    // 开启命名空间

    namespaced : true,

    actions : {

        doA1(){

            console.log("C的doA");

        }

    }

}

export default new Vuex.Store({

    // 模块配置

    modules : {

        // 模块名 : 模块

        ModuleA : a,

        ModuleB : b,

        ModuleC : c

    }

});

<template>
    <div>
        <h1>我是A</h1>
        <button @click="doA1()">actions</button>
        <button @click="doA2()">mutations</button>
        <h3>state : {{ $store.state.ModuleA.A }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ $store.getters["ModuleA/computedA"] }}</h3>
    </div>
</template>

<script>
    export default {
        name : "A",
        methods : {
            doA1(){
                // 开启命名空间之后需要指明
                this.$store.dispatch("ModuleA/doA1");
            },
            doA2(){
                // 开启命名空间之后需要指明
                this.$store.commit("ModuleA/doA2");
            }
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>我是A</h1>

        <button @click="doA1()">actions</button>

        <button @click="doA2()">mutations</button>

        <h3>state : {{ $store.state.ModuleA.A }}</h3>

        <!-- 有特殊符号,需要加上中括号才行 -->

        <h3>getters : {{ $store.getters["ModuleA/computedA"] }}</h3>

    </div>

</template>

<script>

    export default {

        name : "A",

        methods : {

            doA1(){

                // 开启命名空间之后需要指明

                this.$store.dispatch("ModuleA/doA1");

            },

            doA2(){

                // 开启命名空间之后需要指明

                this.$store.commit("ModuleA/doA2");

            }

        }

    }

</script>

<style>

</style>

<template>
    <div>
        <h1>我是B</h1>
        <button @click="doB1()">actions</button>
        <button @click="doB2()">mutations</button>
        <h3>state : {{ $store.state.ModuleB.B }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ $store.getters["ModuleB/computedB"] }}</h3>
    </div>
</template>

<script>
    export default {
        name : "B",
        methods : {
            doB1(){
                // 开启命名空间之后需要指明
                this.$store.dispatch("ModuleB/doB1");
            },
            doB2(){
                // 开启命名空间之后需要指明
                this.$store.commit("ModuleB/doB2");
            }
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>我是B</h1>

        <button @click="doB1()">actions</button>

        <button @click="doB2()">mutations</button>

        <h3>state : {{ $store.state.ModuleB.B }}</h3>

        <!-- 有特殊符号,需要加上中括号才行 -->

        <h3>getters : {{ $store.getters["ModuleB/computedB"] }}</h3>

    </div>

</template>

<script>

    export default {

        name : "B",

        methods : {

            doB1(){

                // 开启命名空间之后需要指明

                this.$store.dispatch("ModuleB/doB1");

            },

            doB2(){

                // 开启命名空间之后需要指明

                this.$store.commit("ModuleB/doB2");

            }

        }

    }

</script>

<style>

</style>