关于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