}
}
}
}
})
在页面中需要使用命名空间的方法调用它。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
},
mounted() {
this['moduleOne/updateValue']('我是改变后的值：1');
this['moduleTwo/updateValue']('我是改变后的值：0');
},
}
</script>
四、在模块中添加getters
namespaced 同样在
getters也生效，下面我们在两个模块中定义了相同名字的方法。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
namespaced:true,
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
},
getters:{
valuePlus(state){
return state.moduleOnevalue+'1'
}
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
},
getters:{
valuePlus(state){
return state.moduleTwovalue+'0'
}
}
}
}
})
在页面引用查看效果。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
