将state写成模块化
//这是学校模块
const xue= {
actions:{},
mutations:{},
state:{},
getters:{}
}
//这学生模块
const student = {
actions:{},
mutations:{},
state:{},
getters:{}
}
使用这个两个模块
export default new Vuex.Store({
modules:{
a:xue,
b:student
}
})
使用者两个模块
...mapState('a',['sum','shool','addr','name','age']),
...mapGetters('a',['bigSum'])
...mapMutations('a',{jia:'JIA',jian:'JIAN'}),
...mapActions('a',{oddJia:'oddJia',wait:'wait'})
使用这样的简写方式,要添加namespaced:true
const xue= {
namespaced: true,
actions:{},
mutations:{},
state:{},
getters:{}
}
原来的写法
he(){
return this.$store.state.sum
},
xuexiao(){
return this.$store.state.shool
},
dizhi(){
return this.$store.state.addr
},
mingzi(){
return this.$store.state.name
},
nianling(){
return this.$store.state.age
},
bigSum(){
return this.$store.getters.bigSum
},
添加多模块后的写法
computed:{
he(){
return this.$store.state.a.sum
},
xuexiao(){
return this.$store.state.a.shool
},
dizhi(){
return this.$store.state.a.addr
},
mingzi(){
return this.$store.state.a.name
},
nianling(){
return this.$store.state.a.age
},
bigSum(){
return this.$store.getters['a/bigSum']
},
}
methods:{
jia(){
this.$store.commit('a/JIA',this.n)
},
jian(){
this.$store.commit('a/JIAN',this.n)
},
oddJia(){
this.$store.dispatch('a/oddJia',this.n)
},
wait(){
this.$store.dispatch('a/wait',this.n)
},
}
网友评论