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

旧约Alatus

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

阅读量797

点赞数 21

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

于 2023-12-16 15:45:50 首次发布

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

版权

前端同时被 2 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 0 订阅

订阅专栏

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
    }
});
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>我是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>
<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>