vuex分模块4

Vuex下Store的模块化拆分实践

https://segmentfault.com/a/1190000007667542

• vue.js
• vuex

猫切 2016年12月02日发布

• 赞  |   10收藏  |  66
• 6k 次浏览

前言

最近的项目用到了 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文件。

目录结构如下：

└─ demo/
   ├── build/
   ├── config/
   ├── node_modules/
   ├── src/
   │   ├── assets/
   │   ├── components/
   │   ├── store/
   │   │   ├── actions/
   │   │   │   ├──aAction.js
   │   │   │   ├──bAction.js
   │   │   │   └──cAction.js
   │   │   ├── constants/
   │   │   │   └── types.js
   │   │   ├── getters/
   │   │   │   └── aGetter.js
   │   │   ├── modules/
   │   │   │   ├── aModules.js
   │   │   │   ├── bModules.js
   │   │   │   ├── cModules.js
   │   │   │   └── index.js
   │   │   ├── mutations/
   │   │   │   ├── aMutation.js
   │   │   │   ├── bMutation.js
   │   │   │   └── cMutation.js
   │   │   └── index.js
   │   ├── App.vue
   │   └── main.js
   ├── static/
   ├── utils/
   ├── test/
   └── index.html

好了，基本的文件结构大概就是上面