使用vue全过程（Vuex使用指南-Module四）

使用vue全过程（Vuex使用指南-Module四）3、再来看我们使用的地方跟我们在store下的调用方式基本相同，不同的地方我们以getters为例，...mapGetters('common' ['getUserName']) 其中添加了‘common’用以表示数据是从哪个module中获取的数据。其他的以此类推，代码如下大家可以参考一下：我们可以看出如果是一下小的单页面应用，共享数据放到一个store文件中就可以了，但是当我们的功能模块越来越多应用越来越大，那么module的形式就能极大地减少我们的维护和开发成本。

一、前言

从前面几章的学习中我们学会了vuex的基本使用方法，但是随着我们项目的日益扩大，发现我们store中的东西也越来越多，这可能就导致了我们js文件代码量急速的增加不利于我们的阅读和维护，于是按功能模块进行拆分就显的势在必行了。

二、Module的使用

1、首先我们在store文件夹下面创建modules文件夹，用于存放我们后面项目添加的一系列的功能模块的共享数据，然后在store中引用放到store中的modules中。如下图：

2、然后我们创建一个modules中创建一个common.js用来存放公共的共享数据，

数据的形式如下图，我直接将之前的store文件内容复制过来了大家看一下基本上是一致的，需要注意的有两点：

• 添加了namespace：true字段，模块化管理数据请不要忘了命名空间的开启，这样我们就可以用common找到我们的这个文件中的共享数据。
• 这个里面跟store中不同的是common直接就是一个实体。不需要再去创建new Vuex.Store({}）。

3、再来看我们使用的地方跟我们在store下的调用方式基本相同，不同的地方我们以getters为例，...mapGetters('common' ['getUserName']) 其中添加了‘common’用以表示数据是从哪个module中获取的数据。其他的以此类推，代码如下大家可以参考一下：

总结：

我们可以看出如果是一下小的单页面应用，共享数据放到一个store文件中就可以了，但是当我们的功能模块越来越多应用越来越大，那么module的形式就能极大地减少我们的维护和开发成本。