前言

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