【Vuex】10、Vuex-modules的使用详解

1、认识Module

• Module是模块的意思，为什么在Vuex中我们要使用模块呢？
• Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理
• 当应用变得非常复杂时，store对象就有可能变得相当臃肿
• 为了解决这个问题，Vuex允许我们将store分隔成模块（Module），而每个模块拥有自己的state、mutation、action、getters等
• 我们按照什么样的方式来组织模块呢？
• 我们看代码：

2、Module局部状态

• 上面的代码中，我们已经有了整体的组织机构，下面我们来看看具体的局部模块中的代码如何书写：
• 我们在moduleA中state、mutations、getters
• mutation和getters接受的第一个参数是局部状态对象

• 注意：
• 我们获取模块里面的state属性的话，是可以直接$store.state.module的key.属性
• 我们获取模块里面的getters属性的话，是通过$store.getters.方法名或者$store.getters.方法名(参数)；注意不要其他的getters方法命名重复；在模块中定义的getters方法（state,payload）接收两个参数外，可以接收rootState获取根目录的state属性rootState.根state属性；还可以跟rootGetters获取根getters方法

模块getters接收参数                                                                           组件调用

• 我们修改state的属性，以同步的形式，则在子组件中还是使用$store.commit(模块中mutation定义的方法, payload)
• 我们修改state的属性，以异步的形式，则在子组件中还是使用$store.dispatch(模块中actions定义的方法名，paylood)；我们打印模块中的context：输出如下：

3、Actions的写法

• actions的写法呢？接收一个context参数对象
• 局部定义通过context.state暴露出来，根节点状态则为context.rootState

• 如果getters中也需要使用全局的状态，可以接受更多的参数

4、项目结构：

• 当我们的Vuex帮助我们管理过多的内容时，好的项目结构可以让我们的代码更加清晰

抽离后的store的目录结构：

index.js代码：

getters.js代码：

actions.js代码：

mutations代码：