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>