vuex配置项modules
当项目比较大时,所有的全局数据都存放在state里,会非常混乱,使用modules,把数据进行分类处理,即模块化
使用方法
每个模块是一个独立的store,管理着不同类型的数据,然后总体的store引入所有的分模块store即可
在分模块中:
src/store/loading.js文件下
export default {
namespaced:true,
state:{
isLoading:false
},
getters:{
isAdult:function(){
return "loading里的getters";
}
},
mutations:{
mIsLoading(state,payload){
state.isLoading = payload.isLoading;
}
},
actions:{
}
}
src/store/person.js文件下
import axios from "axios";
export default {
namespaced:true,
state:{
age:12,
isAdult:false
},
getters:{
isAdult:function(state){
return state.isAdult?"已成年":"未成年"
}
},
mutations:{
mAddAge(state,payload){
if(state.age>=150){
state.age=150;
return;
}
state.age+=payload.inc;
if(state.age>=18){
state.isAdult = true;
}else{
state.isAdult = false;
}
}
},
actions:{
// 参数:
// context就是 store对象
// payload:载荷
aAddAge(context,payload){
axios({
url:"/inc"
}).then(res=>{
// 提交mutation
context.commit({
type:"mAddAge",
inc:res.data.count
})
})
}
}
}
在总体store中引入:
src/store/index.js文件下
import Vue from "vue";
import vueX from "vuex";Vue.use(vueX);
import loading from "./loading";
import person from "./person";export default new vueX.Store({
modules:{
loading,
person
},
state:{
},
getters:{
},
mutations:{
},
actions:{
}
})
在组件里使用state数据时,多加个模块名即可
$store.state.person.age
在组件里使用getters时,可以不加模块名,但是必须保证所有分模块的getters里的方法不重名
<p>{{$store.getters.isAdult}}</p>
如果重名了则要给分模块加命名空间namespaced:true
<p>{{$store.getters["person/isAdult"]}}</p>
mutations的提交和actions的派发也同样需要加上模块名如下:
this.$store.dispatch({
type:"person/aAddAge"
});
ps:
强烈要求一定给所有分模块加上命名空间 namespaced:true,使用的时候加上模块名好区分
辅助函数
组件的模板上过重(写了一长串),为了减少代码量,使用映射方式,将vuex的代码映射到组件中
mapState
在组件中的computed中不分模块的写法:
组件中引入 import {mapState} from "vuex"
computed:{
...mapState(['count',"count2"])
}
就等价于
computed:{
count(){
return this.$store.state.count
}
}
在模板上使用
{{count}}
{{count2}}
分模块的写法
computed:{
...mapState(['count',"count2","person"])
}
会将person块的所有state映射过来
在模板上使用
{{person.age}}
mapGetters
在组件中,import {mapState,mapGetters} from "vuex"
不分模块的写法
computed:{
...mapGetters(['isAdult'])
}
分模块的写法
computed:{
...mapGetters("person",['isAdult'])
}
模板上的使用
{{isAdult}}
mapMutations和mapActions
在组件中,import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
不分模块
methods:{
...mapActions(["change"]),
changeFun(){
this.change()
};
}之前的写法
methods:{
changeFun(){
this.$store.dispatch("change")
};
}
分模块
export default{
namespaced:true,
………………
actions:{
aAddAge(context,payload){
console.log("moudleB的actions");
}
}
}
组件里
<template>
<div >
<h5>Banner组件:</h5>
<input type="button" value="长大" @click="addAge">
</div>
</template>
<script>
import { mapState,mapGetters, mapActions } from "vuex";
export default {
name: "Banner",
methods:{ //把"moudleB/aAddAge"映射到当前组件的方法(方法名:aAddAge)
...mapActions({"aAddAge":"moudleB/aAddAge"}),
addAge(){
this.aAddAge({num:5});//调用映射的方法名(这个名字可以自己起)参数正常传
}
}
};
</script>
这样一来,不需要再写提交的代码,而是直接把vuex的数据和方法映射到组件中,模板上也不需要写一长串的$store,注意,state和getters映射到computed中,mutations和actions都是方法,写到methods中,vuex的数据和方法拿过来后就是组件的方法和数据,该怎么用还怎么用