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将会保留下来。

---

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