likes
comments
collection

关于vuex中的modules

作者站长头像
站长
· 阅读数 14

来自前端萌新第一次尝试发布的学习记录

vuex的modules

State是单一状态树结构,所有的状态都在state中,如果项目复杂,就会难以管理,modules解决了这个问题

modules可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。 具体见官网 Module | Vuex (vuejs.org)

在vuex的学习过程中,发现拿子模块的state里的属性时 需要用对象的方式

...mapState({
      变量名: (state) => state.子模块名.变量名,
    })

但是同样是子模块中的getters却可以直接用数组的方式拿(没有模块化管理的时候也是这么拿)

因为对此有所疑惑,所以自己尝试探索了一下,本篇仅仅只是记录一下自己解惑过程,有哪里说的不对,欢迎指正

modules合并store

关于vuex中的modules

在工具中不难发现,home子模块管理的state,会以对象的形式合并到store的state里,home对象里的数据,就是home模块的state
​
因此引发下一个问题

子模块的mutation和action会被合并到哪里?

因为工具只能看到state,所以打印了store查看子模块管理的mutation和action

关于vuex中的modules

此时发现mutation和action是以数组形式合并到store里,并且是直接拿到,在此时看不出来是home子模块的mutation和action ​ 于是新的问题来了

出现同名时,vuex是如何处理的?

在vuex最外层的mutation中写了一个与home子模块的mutation中同名的一个函数,并且打印

关于vuex中的modules

此时发现,两个同名的mutations被整合到了一个数组下,在调用这个函数时,无法分辨调用的是哪一个,会同时执行

在home子模块开启命名空间之后,重名问题就得到了解决

namespaced:true

所有home子模块下的muations,actions,getters都被加了一个前缀,用以区分

但是在调用所有开启了命名空间的子模块的mutations,actons和getters时,也必须加上相同前缀,否则会报错找不到

关于vuex中的modules

基于以上,简单总结:

modules  vuex的模块化开发 影响的是state    
namespaced  命名空间 防止重名 影响 muations,actions,getters