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

旧约Alatus

已于 2023-12-17 17:43:01 修改

阅读量898

点赞数 25

分类专栏： # VUE框架前端文章标签： javascript vue.js 前端前端框架 vue ecmascript json

于 2023-12-15 16:08:21 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135019722

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

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>