因为Vuex可以实现多组件共享的操作,但是一个项目应该模块化的分别各个组件之间的功能,不能全部写在一起,这样会导致代码的冗余和不方便管理后期。
我们可以根据不同的功能去用不同的组件,这样后期维护起来会方便一些,也不会冗余很多东西。
比如有两个组件,一个是相加求和的组件,还有一个是相减的组件,如果我们只有一个配置项的话我们把所以相关的代码都会写在一起,而这样的话会增加后期我维护困难等问题,所以这个时候要合理的分模块化,相加的就放在一起,相减的也放在一起,这样后期维护会很轻松。
// 引入Vuex和Vue
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 相加的功能
let xiangjia = {
namespaced: true,//开启命名控空间
actions:{
add:function(minstore,value){
console.log(this);
minstore.commit('add', value);
}
},
mutations : {
add(minstore,value){
minstore.sum+=value;
},
},
state : {
sum : 1
}
}
//相减的功能
let xiangjian = {
namespaced:true,//开启命名控空间
actions:{
},
mutations : {
sub(minstore,value){
minstore.sum-=value
}
},
state : {
sum : 1
}
}
//服务
// let actions = {
// add:function(minstore,value){
// minstore.commit('add', value);
// }
// }
// 处理
// let mutations = {
// add(minstore,value){
// minstore.sum+=value;
// },
// sub(minstore,value){
// minstore.sum-=value
// }
// }
//呈现数据
// let state = {
// sum : 1
// }
export default new Vuex.Store({
modules: {
xiangjia,
xiangjian
}
})
一定别忘了开启命名空间,这样A和B组件才能访问。