如何实现Vuex Store的模块化，并优化大型应用的状态管理？

本文共计1399个文字，预计阅读时间需要6分钟。

前言：最近的项目用到了vue.js、vuex和vue-router，版本为2.0。在搞Store的时候，发现圈子里大部分文章都是关于比较基础的Demo搭建方式，很少涉及到比较复杂模块化的。

前言

最近的项目用到了 vue.js + vuex + vue-router 全家桶，版本为 >2.0，在搞Store的时候发现，圈子里大部分关于vuex的文章都是比较基础的Demo搭建方式，很少有涉及到比较复杂的模块化拆分的Store实践，而且事实上也有朋友在实践中问到过这方面的内容，vuex自身提供了模块化的方式，因此在这里总结一下我自己在项目里的心得。

模块化拆分

vue.js的项目文件结构在这里就不说了，大家可以通过vue-cli初始化项目,脚手架会为你搭建一个start项目的最佳实践。

默认你已经搭架好了一个项目，而且需要建立或者已经是一个复杂的Store，但是还没有进行模块拆分，你可以尝试对其进行模块拆分，当然在一开始你不必一定需要这么做。

1. 安装Vuex，建立文件结构

在项目根目录下安装vuex:

npm install vuex -S

安装完毕后，在项目的src文件夹下新建一个store文件夹，并且分别在其中新建modules,actions,mutations,getters,constants子文件夹和一个index.js文件。