前言
最近的項目用到了 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}
actions/aAction.js
import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'import { toQueryString } from '../../utils'import axios from 'axios'export const fetchListAction = { fetchList ({ commit, state }, param) { commit(FETCH_LIST_REQUEST) axios.get('http://youdomain.com/list') .then(function (response) { commit(FETCH_LIST_SUCCESS, { data: response.data }) console.log(response); }) .catch(function (error) { commit(FETCH_LIST_FAILURE, { error: error }) console.log(error); }); }}getters/aGetter.js
export const = fetchListGetter = { hotList (state) { return state.list.data.slice(0, 10) }}mutations/aMutation.js
import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'export const fetchListMutation = { [FETCH_LIST_REQUEST] (state) { state.isFetching = true }, [FETCH_LIST_SUCCESS] (state, action) { state.isFetching = false state.data = action.data state.lastUpdated = (new Date()).getTime() }, [FETCH_LIST_FAILURE] (state, action) { state.isFetching = false state.error = action.error }}modules/aModule.js
import { fetchListAction } from '../actions/aAction'import { fetchListGetter } from '../getters/aGetter'import { fetchListMutation } from '../mutations/aMutation'export const list = { state: { isFetching: false, data: [] } actions: fetchListAction, getters: fetchListGetter, mutations: fetchListMutation}modules/index.js
import { list } from './aModule'module.exports = { list: list}3. 掛載store
index.js
import Vue from 'vue'import Vuex from 'vuex'import createLogger from 'vuex/dist/logger'import { list } from './modules'Vue.use(Vuex)const store = new Vuex.Store({ modules: { list: list }, plugins: [createLogger()], strict: process.env.NODE_ENV !== 'production'})if (module.hot) { module.hot.accept(['./mutations'], () => { const newMutations = require('./mutations').default store.hotUpdate({ mutations: newMutations }) })}export default store4. store注入vue實例
main.js
????import store from './store' ???? var vue = new Vue({ store, ???? })vue.$mount('#app')5. 在Component中使用
Vuex 提供了組件中使用的mapState,mapAction,mapGetter方法，因此可以很方便的調用。
Example.vue
<template> ?????????</template><script>import { mapState, mapActions, mapGetters } from 'vuex'module.exports = { ??????? methods: { ...mapActions([ 'fetchList' ]) }, computed: { ...mapState{ list: state => state.list }, ...mapGetters{[ 'hotList' ]} }}</script><style> ???????</style>復用模塊
模塊化拆分之后可以實現較為復雜的數據流，特別地，如果對action和mutation稍加改造，就可以復用模塊：
比如我們在Example.vue中發起Action：
Example.vue
<template> ?????????</template><script>import { mapState, mapActions, mapGetters } from 'vuex'module.exports = { ??????? mounted () { this.fetchList({ request: 'week' }) }, methods: { ...mapActions([ 'fetchList' ]) }, computed: { ...mapState{ list: state => state.list }, ...mapGetters{[ 'hotList' ]} }}</script><style> ???????</style>在上面的例子中，我們在組件掛載完成之后發起了一個fetchList的action，并添加了一個名為request的參數，這里給一個week值，也可以給按照業務需要給month、year之類的值，接下來對aAction.js做一些修改。
actions/aAction.js
import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'import { toQueryString } from '../../utils'import axios from 'axios'export const fetchListAction = { fetchList ({ commit, state }, param) { commit(FETCH_LIST_REQUEST, { request: param['request'] }) axios.get(`http://youdomain.com/${param['request']}list`) .then(function (response) { commit(FETCH_LIST_SUCCESS, { request: param['request'] data: response.data }) console.log(response); }) .catch(function (error) { commit(FETCH_LIST_FAILURE, { request: param['request'] error: error }) console.log(error); }); }}請求成功之后，在 commit()中加入了一個request的參數，這樣Mutation就可以從里面獲取相應的參數，最后對aMutation做一些修改。
mutations/aMutation.js
import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'export const fetchListMutation = { [FETCH_LIST_REQUEST] (state, action) { state[action.request].isFetching = true }, [FETCH_LIST_SUCCESS] (state, action) { state[action.request].isFetching = false state[action.request].data = action.data state[action.request].lastUpdated = (new Date()).getTime() }, [FETCH_LIST_FAILURE] (state, action) { state[action.request].isFetching = false state[action.request].error = action.error }}state加入了[action.request]，以區分不同的接口數據。
完成以上修改后，只需要在組件調用相應的action時加入不同的參數，就可以調用相同類型但數據不同的接口。
總結
以上是我在Vuex實踐中總結的一些東西，分享給大家，如果有不合理或者錯誤❌的地方，也希望各位老司機不吝賜教，有機會多交流。也希望大家多多支持武林網。
微信號：pasturn
Github：https://github.com/pasturn
新聞熱點
疑難解答
