...mapActions(['moduleOne/timeOut','moduleOne/globaltimeOut','moduleOne/othertimeOut'])
},
mounted() {
// this['moduleOne/updateValue']('我是改变后的值：1');
// this['moduleTwo/updateValue']('我是改变后的值：0');
// this['moduleOne/timeOut']();
// this['moduleOne/globaltimeOut']();
this['moduleOne/othertimeOut']();
},
}
</script>
注意：你可以在module中再继续添加模块，可以无限循环下去。
六、动态注册模块
有时候，我们会使用router的异步加载路由，有些地方会用不到一些模块的数据，那么我们利用VueX的动态注册模块。我们来到入口文件main.js中。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = false
// 动态注册模块
store.registerModule('moduleThree',{
state:{
text:"this is moduleThree"
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在页面引用它。
<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>
<p>moduleThree_mapState：{{moduleThreetext}}</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,
moduleThreetext:(state)=>state.moduleThree.text
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
