为什么会出现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> 

我们看到两个模块的云南idc服务商值都被改变了，为什么呢?因为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> 

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

(责任编辑：系统运维)