element ui框架（vuex模块化）

上一节我们说到了vuex在数据保存中的作用。其实vuex在实际使用中，需要保存非常多的数据，不可能所有的数据都放到index.js里面。因此，有必要把数据放到单独的模块里面。今天就来讨论一下，如何把数据放到单独的模块里面。

1、首先在store目录下创建modules目录

创建modules目录的目的，就是为了把相关的数据处理文件都集中放到这一个地方。

2、将之前store/index.js中的部分内容拷贝到store/modules/user.js下面，

3、重新调整store/index.js文件

4、重新调整之前saveState函数，

没有调整前，saveState函数是这么处理的，即

因为这里的引用变成了state下面的一个user模块，所以需要重新修改下，

5、之前引用user的地方保持不变，，

<span>{{$store.getters.getUser.name}}</span>

6、submitForm中引用user的地方也同样不变，

this.$store.dispatch("asyncUpdateUser", {name:this.form.name});

7、开始测试

这部分测试地方，其实和前一节一样。主要还是看，Login页面登录到Main页面后，刷新网页，user显示部分的内容是否依然正常。如果一切都没有问题，那说明我们的修改是正确的。如果问题比较大，那需要回头看一下，究竟是什么地方出了问题。

8、进一步的部署和测试

如果不仅仅希望用node.js测试，还可以用npm run dev编译，用iis测试，这也是可以的。不过要注意的是，每一次修改修改js代码后都需要重新编译、重新启动iis server。这个是实际开发中经常遇到的错误。

Recommend