ModularityinVuex-Module

ModularityinVuex-为什么Module会有模块化？由于使用了单一的状态树，应用程序的所有状态都会被集中到一个比较大的对象中。当应用程序变得非常复杂时，存储对象会变得非常臃肿。这句话的意思是，如果你把所有的状态都放在state里面，当项目越来越大的时候，Vuex会越来越难维护。于是就有了Vuex的模块化简单应用application定义了两个模块user和settinguser来管理用户的statetoken在setting管理applicationnameconststore=newVuex.Store({modules:{user:{state:{token:'12345'}},setting:{state:{name:'Vuexinstance'}}})定义child-b组件分别显示用户的token和应用名称请注意：此时要获取子模块的状态需要通过$store.state.modulename.propertyname来获取看起来有点麻烦，我们可以通过之前学习的getter来改变getter：{token:state=>state.user.token,name:state=>state.setting.name}请注意：这个getter是根级别的getter。Computed被mapGetters引用：{...mapGetters(['token','name'])}模块化中的NamespacesNamespacenamespaced在这里，注意理解defaultsituationUnderthehood,actions,mutations,andgettersinsideamodule在全局命名空间中注册——这使得多个模块能够响应相同的突变或动作。这句话的意思是刚才的user模块还是setting模块，它的action、mutations和getters其实是不区分的，可以直接全局调用，比如user:{state:{token:'12345'},mutations:{//这里的state表示用户的状态updateToken(state){state.token=678910}}},通过mapMutations调用方法:{...mapMutations(['updateToken'])}修改token但是，如果我们要保证内部模块的高闭，可以使用namespaced来设置高闭吗？可以这样理解，如果一个家族分开，在这个那时，你的父母可以自由进出分配给你的小家。如果你觉得你没有隐私，我们可以给你的门加一把锁（namespacenamespaced），你的父母就不能再进出你的小家，比如user:{namespaced:true,state:{token:'12345'},mutations:{//这里的state代表用户的stateupdateToken(state){state.token=678910}}}，使用模块action/mutationswithnamespace方案一：直接调用——带上模块的属性名pathtest(){this.$store.dispatch('user/updateToken')//直接调用方法}方案二：辅助函数-带模块方法的属性名路径：{...mapMutations(['user/updateToken']),test(){this['user/updateToken']()}}修改token方案三：createNamespacedHelpers创建一个基于某个命名空间的辅助函数import{mapGetters,createNamespacedHelpers}from'vuex'const{mapMutations}=createNamespacedHelpers('user')modifytoken2总结：有不懂的请加q群147936127或vx:ltby52119,谢谢~