vuex入门篇 -- module

前言

之前的入门篇文章我们去了解了state，getter，mutation，action。本篇文章我们专门来讲一下module这个关键字的内容。

---

正文

module的意思是模块，我们这里要说一下编写的store的结构形式，是以一个根节点对象，多个模块节点对象组成的，一个树状结构。

vuex由于使用单一状态树，所以如果只有一个节点的话，在大型项目下，一个状态对象就会十分的臃肿，所以module实际上就是分化这些状态的利器，同时也就是为其树添加子节点内容的关键点。

每一个模块都拥有相对独立的state，getter，mutation，action， 同时也是可以拥有自己的子模块的。这样将会清晰的划分出我们需要的状态信息。针对于工程清晰的归类将会有助于我们更为方便的运用。

当然我们在之前的文章之中提到的namespaced的操作注意点，那么为什么会有这一属性内容的设置呢，实际上是为了模块的内聚和复用性考虑的。

• 默认情况下，我们虽然编写了模块，但是实际上它们的内容依旧是注册在全局命名空间之中（就是我们所说的根状态管理对象）。
• 而当我们设置了namespaced之后，模块之中的state，getter，mutation，action都会依据模块的注册路径调整命名，以此来达到相对的内容独立。

由于模块可以嵌套，那么模块在设置了namespaced之后，子模块的信息会怎么样呢？

• 子模块没有设置namespaced的时候会怎么样呢。这个时候，子模块的内容将会被注册在当前模块下面，例如有一个模块为user，设置了命名空间，其有一个子模块user_child,没有设置命名空间，这个时候，我们通过this.$store对象发现，user_child下的内容会全部的注册到路径user/下面，即其注册成为了user模块的内容。
• 如果user_child设置了命名空间，那么我们可以看到其内容注册路径是user/user_child/（这个时候我们通过mapState等等方法来导入内容的时候命名空间传值使用user/user_child）

既然我们将状态模块化了，那么模块之中的内容如何访问跟对象的内容呢？这里我们需要提及一下之前action学习时提到过的context参数内容，即action对象中数据项方法可以获取的参数，它是一个对象内容，其中有rootState,和rootGetter，同时也有state和getter，用root修饰的，实际上就是根状态管理对象，而没有root修饰的，就是当前模块之中的内容，所以我们在模块之中想要访问到根对象内容的时候是可能的。

可以在action中访问全局内容，同样也可在模块的action之中注册全局的action，这个时候只需要我们传递给action对象数据项的值是一个对象，其中包含两个数据内容root（布尔类型，设置true表示全局），还有一个handler（处理函数），这样就可以注册一个全局的内容了。

接下来我们说说动态注册模块。store对象之中提供了registerModule方法，传递三个参数，第一个是namespaced的描述，一个是状态对象内容（即state这些关键字的设置），还有一个是option对象内容。命名空间的描述可以是字符串或者数组，数组的意思就是子模块，举个例子['user', 'child']，这表示的是user模块的child子模块的内容，新增的模块内容就是child子模块内容。或者字符串传递'user'，着表示新增的内容是user模块。最后的option对象可以传递一些设置，帮助我们更好的创建或者覆盖模块。例如preserveState这个属性（前提是用于覆盖已有的模块），传递过去之后将会重写已有模块的getter，mutation和action。但是state将会保留下来。

---

###结束 这一篇文章可能有点难看下来，基本上都是一些概述性的文字，索性概念都还简单，如果有发现不正确或者歧义的地方，记得告知我哟。祝愿共同成长，共同进步。拜拜

转载于:https://juejin.im/post/5cdbc7b7e51d456e4c4c0103