关于vuex中的modules
来自前端萌新第一次尝试发布的学习记录
vuex的modules
State是单一状态树结构,所有的状态都在state中,如果项目复杂,就会难以管理,modules解决了这个问题
modules可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。 具体见官网 Module | Vuex (vuejs.org)
在vuex的学习过程中,发现拿子模块的state里的属性时 需要用对象的方式
...mapState({
变量名: (state) => state.子模块名.变量名,
})
但是同样是子模块中的getters却可以直接用数组的方式拿(没有模块化管理的时候也是这么拿)
因为对此有所疑惑,所以自己尝试探索了一下,本篇仅仅只是记录一下自己解惑过程,有哪里说的不对,欢迎指正
modules合并store
在工具中不难发现,home子模块管理的state,会以对象的形式合并到store的state里,home对象里的数据,就是home模块的state
因此引发下一个问题
子模块的mutation和action会被合并到哪里?
因为工具只能看到state,所以打印了store查看子模块管理的mutation和action
此时发现mutation和action是以数组形式合并到store里,并且是直接拿到,在此时看不出来是home子模块的mutation和action 于是新的问题来了
出现同名时,vuex是如何处理的?
在vuex最外层的mutation中写了一个与home子模块的mutation中同名的一个函数,并且打印
此时发现,两个同名的mutations被整合到了一个数组下,在调用这个函数时,无法分辨调用的是哪一个,会同时执行
在home子模块开启命名空间之后,重名问题就得到了解决
namespaced:true
所有home子模块下的muations,actions,getters都被加了一个前缀,用以区分
但是在调用所有开启了命名空间的子模块的mutations,actons和getters时,也必须加上相同前缀,否则会报错找不到
基于以上,简单总结:
modules vuex的模块化开发 影响的是state
namespaced 命名空间 防止重名 影响 muations,actions,getters
转载自:https://juejin.cn/post/7042621397310373896