详解Vuex下Store的模块化拆分实践

前言

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

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

2. 编写模块A

在编写模块之前，首先设定一些type类，例如：

types.js

module.exports = keyMirror({  FETCH_LIST_REQUEST: null,  FETCH_LIST_SUCCESS: null,  FETCH_LISR_FAILURE: null  })function keyMirror (obj) { if (obj instanceof Object) {  var _obj = Object.assign({}, obj)  var _keyArray = Object.keys(obj)  _keyArray.forEach(key => _obj[key] = key)  return _obj }}

上面自己实现keyMirror的方法，大家也可以使用下面这个包：

https://github.com/STRML/keyMirror

keyMirror的作用就是下面这个一个形式?，作用其实也不是很大：

Input: {key1: null, key2: null}

Output: {key1: key1, key2: key2}