詳解Vuex下Store的模塊化拆分實(shí)踐
前言
最近的項(xiàng)目用到了 vue.js + vuex + vue-router 全家桶，版本為 >2.0，在搞Store的時(shí)候發(fā)現(xiàn)，圈子里大部分關(guān)于vuex的文章都是比較基礎(chǔ)的Demo搭建方式，很少有涉及到比較復(fù)雜的模塊化拆分的Store實(shí)踐，而且事實(shí)上也有朋友在實(shí)踐中問(wèn)到過(guò)這方面的內(nèi)容，vuex自身提供了模塊化的方式，因此在這里總結(jié)一下我自己在項(xiàng)目里的心得。
模塊化拆分
vue.js的項(xiàng)目文件結(jié)構(gòu)在這里就不說(shuō)了，大家可以通過(guò)vue-cli初始化項(xiàng)目,腳手架會(huì)為你搭建一個(gè)start項(xiàng)目的最佳實(shí)踐。
默認(rèn)你已經(jīng)搭架好了一個(gè)項(xiàng)目，而且需要建立或者已經(jīng)是一個(gè)復(fù)雜的Store，但是還沒(méi)有進(jìn)行模塊拆分，你可以嘗試對(duì)其進(jìn)行模塊拆分，當(dāng)然在一開(kāi)始你不必一定需要這么做。
1. 安裝Vuex，建立文件結(jié)構(gòu)
在項(xiàng)目根目錄下安裝vuex:
npm install vuex -S
安裝完畢后，在項(xiàng)目的src文件夾下新建一個(gè)store文件夾，并且分別在其中新建modules,actions,mutations,getters,constants子文件夾和一個(gè)index.js文件。
目錄結(jié)構(gòu)如下：
└─ 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
好了，基本的文件結(jié)構(gòu)大概就是上面?這樣的。
2. 編寫(xiě)模塊A
在編寫(xiě)模塊之前，首先設(shè)定一些type類(lèi)，例如：
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
}
}
上面自己實(shí)現(xiàn)keyMirror的方法，大家也可以使用下面這個(gè)包：
https://github.com/STRML/keyMirror
keyMirror的作用就是下面這個(gè)一個(gè)形式?，作用其實(shí)也不是很大：
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 store
4. store注入vue實(shí)例
main.js
····
import store from './store'
····
var vue = new Vue({
store,
····
})
vue.$mount('#app')
5. 在Component中使用
Vuex 提供了組件中使用的mapState,mapAction,mapGetter方法，因此可以很方便的調(diào)用。
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>
復(fù)用模塊
模塊化拆分之后可以實(shí)現(xiàn)較為復(fù)雜的數(shù)據(jù)流，特別地，如果對(duì)action和mutation稍加改造，就可以復(fù)用模塊：
比如我們?cè)贓xample.vue中發(fā)起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>
在上面的例子中，我們?cè)诮M件掛載完成之后發(fā)起了一個(gè)fetchList的action，并添加了一個(gè)名為request的參數(shù)，這里給一個(gè)week值，也可以給按照業(yè)務(wù)需要給month、year之類(lèi)的值，接下來(lái)對(duì)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);
});
}
}
請(qǐng)求成功之后，在 commit()中加入了一個(gè)request的參數(shù)，這樣Mutation就可以從里面獲取相應(yīng)的參數(shù)，最后對(duì)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]，以區(qū)分不同的接口數(shù)據(jù)。
完成以上修改后，只需要在組件調(diào)用相應(yīng)的action時(shí)加入不同的參數(shù)，就可以調(diào)用相同類(lèi)型但數(shù)據(jù)不同的接口。
總結(jié)
以上是我在Vuex實(shí)踐中總結(jié)的一些東西，分享給大家，如果有不合理或者錯(cuò)誤❌的地方，也希望各位老司機(jī)不吝賜教，有機(jī)會(huì)多交流。也希望大家多多支持腳本之家。
微信號(hào)：pasturn
Github：https://github.com/pasturn
相關(guān)文章
vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色
這篇文章主要介紹了vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue開(kāi)發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue開(kāi)發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解VSCode配置啟動(dòng)Vue項(xiàng)目
這篇文章主要介紹了VSCode配置啟動(dòng)Vue項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要給大家分享介紹了7個(gè)適用于Vue?3的高顏值UI組件庫(kù),合理利用,又或者學(xué)習(xí)借鑒都是不錯(cuò)的選擇,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
在組件中增加的css加了scoped屬性之后,就在會(huì)在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue自定義指令實(shí)現(xiàn)v-tap插件的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
vue通過(guò)krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼
這篇文章主要介紹了vue上通過(guò)krpano.js實(shí)現(xiàn)360全景圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-10-10
vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
虛擬DOM的概念是通過(guò)狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹(shù)，然后使用虛擬節(jié)點(diǎn)樹(shù)進(jìn)行渲染。在渲染之前，會(huì)使用新生成的虛擬節(jié)點(diǎn)和上一次生成的虛擬節(jié)點(diǎn)進(jìn)行對(duì)比，只渲染不同的部分2022-08-08