},
}
}
}
})
在页面查看。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
<p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
<p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
<p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
<p>moduleTwo_mapGetters_other：{{TwootherValue}}</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
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
OneglobalValue:'moduleOne/globalValuePlus',
TwoglobalValue:'moduleTwo/globalValuePlus',
OneotherValue:'moduleOne/otherValuePlus',
TwootherValue:'moduleTwo/otherValuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
},
mounted() {
// this['moduleOne/updateValue']('我是改变后的值：1');
// this['moduleTwo/updateValue']('我是改变后的值：0');
},
}
</script>
五、在模块中添加actions
actions对象中的方法有一个参数对象
ctx。里面分别
{state,commit,rootState}。这里我们直接展开用。
actions默认只会提交本地模块中的
mutations。如果需要提交全局或者其他模块，需要在
commit方法的第三个参数上加上
{root:true}。
/* eslint-disable no-unused-vars */
