框架最大的特点，个人觉得，处处体现着封装和模块化。
如果现在我们在开发一个项目复杂度较高的后台管理系统，几乎在项目的各个模块中都存在对数据的管理，我们举个最简单的例子，现在有两个模块需要使用到sotre，用户的操作和商品的操作，那么如果数据多且操作复杂，把所有模块的state和getters，mutations及actions都放在一个js文件中，文件冗长，后期维护花费时间也多，处处都不方便。所以Vuex提供了module，以便在store中也可以根据项目的模块去划分模块。
给个应用场景：在某个项目中，user模块和商品模块都需要用到vuex，为了让项目的vuex结构更清晰，根据vuex提供的module去单独的提供针对某个单独模块的数据仓库。
除了每个模块拥有自己的 state、mutation、action、getter甚之外，子模块的子模块——也可以从上至下进行同样方式的分割（类似于vue-router的children）。
但是有一点要强调，就是尽管是可以在store中根据module划分模块，但是最终的store入口都是store的根配置index.js文件，也就是说，最终都是将各个模块的store配置文件传入store的index.js中，然后再通过index.js参与到根组件的实例化中。
src文件目录树
store中的根配置文件：
store中的index.js
user模块的store：
store中的user.js
product模块的store：
store中的product.js
将子模块配置好了之后引入到index.js的module中:
导入子模块的index.js
然后在任意组件访问state：
访问store的state
至于getter的访问，先看下store的输出:
控制台输出store
可以看到，无论是根配置的getters，还是子模块的getters，都是同级别的，那么访问方式也是一样的。
子模块中的actions和mutations和store根配置文件中的访问模式是一样的。
访问模块中的actions
注：
（1）如果想要在子模块的getter中访问根store的的数据
user.js
（2）子模块中的actions中进行数据访问
user.js
（3）命名空间：
因为module中的子仓库的声明，都是全局命名的，相当与虽然在代码里做了模块的封装处理，但是在使用时还是没有明确的划分模块，所以vuex提供了一个命名空间的功能。如果你想让将当前项目store中所有子模块和根模块都有严格的界限，那就开启这个命名空间功能，具体代码请参考官网，因为官网写的很清晰。（就不说，略略略~）。
你所羡慕的一切，都是有备而来。
网友评论