Vuex中的Modules你知道多少？

 

为什么会出现VueX的中的s知模块呢?当你的项目中代码变多的时候，很难区分维护。道多那么这时候Vuex的中的s知模块功能就这么体现出来了。

那么我们就开始吧!

一、道多模块是中的s知啥?

/* 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   },   // 在以下属性可以添加多个模块。如：moduleOne模块、道多moduleTwo模块。中的s知   modules: {      moduleOne:{ },道多     moduleTwo:{ }   } }) 

二、在模块内添加state

可以直接在模块中直接书写state对象。中的s知

/* 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:{        state:{          moduleOnevalue:1       }     },     moduleTwo:{        state:{          moduleTwovalue:0       }     }   } }) 

我们在页面中引用它。我们直接可以找到对应的中的s知模块返回值，也可以使用mapState方法调用。道多

<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> import { mapState} from vuex export default {      name:"Home",中的s知     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: {      },     mounted() {      }, } </script> 

三、在模块中添加mutations

我们分别给两个模块添加mutations属性，道多在里面定义相同名字的中的s知方法，我们先在页面看一下。

/* 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:{        state:{          moduleOnevalue:1       },       mutations:{          updateValue(state,value){            state.moduleOnevalue=value         }       }     },     moduleTwo:{        state:{          moduleTwovalue:0       },       mutations:{          updateValue(state,value){            state.moduleTwovalue=value         }       }      }   } }) 

在页面引用它

<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} 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([updateValue])     },     mounted() {          this.updateValue(我是改变后的值：1)     }, } </script> 

我们看到两个模块的高防服务器值都被改变了，为什么呢?因为VueX默认情况下，每个模块中的mutations都是在全局命名空间下的。那么我们肯定不希望这样。如果两个模块中的方法名不一样，当然不会出现这种情况，但是怎么才能避免这种情况呢?

我们需要定义一个属性namespaced为true。

/* 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, //在每个模块中定义为true,可以避免方法重名       state:{          moduleOnevalue:1       },       mutations:{          updateValue(state,value){            state.moduleOnevalue=value         }       }     },     moduleTwo:{        namespaced:true,       state:{          moduleTwovalue:0       },       mutations:{          updateValue(state,value){            state.moduleTwovalue=value         }       }      }   } }) 

在页面中需要使用命名空间的方法调用它。

<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>         <p>moduleTwo_mapState：{ { moduleTwovalue}}</p>         <p>moduleOne_mapGetters：{ { OnevaluePlus}}</p>         <p>moduleTwo_mapGetters：{ { TwovaluePlus}}</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         })     },     methods: {          ...mapMutations([moduleOne/updateValue,moduleTwo/updateValue])     },     mounted() {           // this[moduleOne/updateValue](我是改变后的值：1);         // this[moduleTwo/updateValue](我是改变后的值：0);     }, } </script> 

我们也可以获取全局的变量，第三个参数就是获取全局变量的参数。

/* 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         },         globalValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.global         }       }      },     moduleTwo:{        namespaced:true,       state:{          moduleTwovalue:0       },       mutations:{          updateValue(state,value){            state.moduleTwovalue=value         }       },       getters:{          valuePlus(state){            return state.moduleTwovalue+0         },         globalValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.global         }       }      }   } }) 

在页面查看。服务器租用

<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>     </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         })     },     methods: {          ...mapMutations([moduleOne/updateValue,moduleTwo/updateValue])     },     mounted() {          // this[moduleOne/updateValue](我是改变后的值：1);         // this[moduleTwo/updateValue](我是改变后的值：0);     }, } </script> 

也可以获取其他模块的变量。

/* 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         },         globalValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue         },       }      },     moduleTwo:{        namespaced:true,       state:{          moduleTwovalue:0       },       mutations:{          updateValue(state,value){            state.moduleTwovalue=value         }       },       getters:{          valuePlus(state){            return state.moduleTwovalue+0         },         globalValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue         },       }      }   } }) 

在页面查看。

<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 */ 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         },         globalValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue         },       },       actions:{          timeOut({ state,commit,rootState}){            setTimeout(()=>{              commit(updateValue,我是异步改变的值：1)           },3000)         }       }      },     moduleTwo:{        namespaced:true,       state:{          moduleTwovalue:0       },       mutations:{          updateValue(state,value){            state.moduleTwovalue=value         }       },       getters:{          valuePlus(state){            return state.moduleTwovalue+0         },         globalValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue         },       }      }   } }) 

页面引用。

<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]),         ...mapActions([moduleOne/timeOut])     },     mounted() {          // this[moduleOne/updateValue](我是改变后的值：1);         // this[moduleTwo/updateValue](我是改变后的值：0);         this[moduleOne/timeOut]();     }, } </script> 

下面我们看下如何提交全局或者其他模块的mutations。

/* 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   },   mutations:{      mode(state,data){        state.global=data     }   },   modules: {      moduleOne:{        namespaced:true,       state:{          moduleOnevalue:1       },       mutations:{          updateValue(state,value){            state.moduleOnevalue=value         }       },       getters:{          valuePlus(state){            return state.moduleOnevalue+1         },         globalValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue         },       },       actions:{          timeOut({ state,commit,rootState}){            setTimeout(()=>{              commit(updateValue,我是异步改变的值：1)           },3000)         },         globaltimeOut({ commit}){            setTimeout(()=>{              commit(mode,我改变了global的源码库值,{ root:true})           },3000)         }       }      },     moduleTwo:{        namespaced:true,       state:{          moduleTwovalue:0       },       mutations:{          updateValue(state,value){            state.moduleTwovalue=value         }       },       getters:{          valuePlus(state){            return state.moduleTwovalue+0         },         globalValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue         },       }      }   } }) 

页面引用。

<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]),         ...mapActions([moduleOne/timeOut,moduleOne/globaltimeOut])     },     mounted() {          // this[moduleOne/updateValue](我是改变后的值：1);         // this[moduleTwo/updateValue](我是改变后的值：0);         // this[moduleOne/timeOut]();         this[moduleOne/globaltimeOut]();     }, } </script> 

那么提交其他模块的呢?

/* 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   },   mutations:{      mode(state,data){        state.global=data     }   },   modules: {      moduleOne:{        namespaced:true,       state:{          moduleOnevalue:1       },       mutations:{          updateValue(state,value){            state.moduleOnevalue=value         }       },       getters:{          valuePlus(state){            return state.moduleOnevalue+1         },         globalValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue         },       },       actions:{          timeOut({ state,commit,rootState}){            setTimeout(()=>{              commit(updateValue,我是异步改变的值：1)           },3000)         },         globaltimeOut({ commit}){            setTimeout(()=>{              commit(mode,我改变了global的值,{ root:true})           },3000)         },         othertimeOut({ commit}){            setTimeout(()=>{              commit(moduleTwo/updateValue,我改变了moduleTwo的值,{ root:true})           },3000)         }       }      },     moduleTwo:{        namespaced:true,       state:{          moduleTwovalue:0       },       mutations:{          updateValue(state,value){            state.moduleTwovalue=value         }       },       getters:{          valuePlus(state){            return state.moduleTwovalue+0         },         globalValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.global         },         otherValuePlus(state,getters,rootState){            return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue         },       }      }   } }) 

页面引用。

<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]),         ...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,             OneglobalValue:moduleOne/globalValuePlus,             TwoglobalValue:moduleTwo/globalValuePlus,             OneotherValue:moduleOne/otherValuePlus,             TwootherValue:moduleTwo/otherValuePlus         })     },     methods: {          ...mapMutations([moduleOne/updateValue,moduleTwo/updateValue]),         ...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> 

本文转载自微信公众号「前端历劫之路」，可以通过以下二维码关注。转载本文请联系前端历劫之路公众号。

很赞哦!（64887）