Module

Module

Module是模块的意思, 为什么在Vuex中我们要使用模块呢?

Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.

当应用变得非常复杂时,store对象就有可能变得相当臃肿.

为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等

我们按照什么样的方式来组织模块呢?

我们来看下边的代码

Module局部状态

上面的代码中, 我们已经有了整体的组织结构, 下面我们来看看具体的局部模块中的代码如何书写.

我们在moduleA中添加state、mutations、getters

mutation和getters接收的第一个参数是局部状态对象

注意:

虽然, 我们的doubleCount和increment都是定义在对象内部的.

但是在调用的时候, 依然是通过this.$store来直接调用的.

Actions的写法

actions的写法呢? 接收一个context参数对象

局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

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

项目结构

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