Vuex多模塊開發應用
Vuex多模塊開發應用
背景
現在很多公司用Vue開發自己的產品,隨着產品功能的不斷擴展和增加,同時在項目中我們可能多人合作協同開發項目,那麼帶來一個很大的問題就是如何進行有效協同開發,提高開發效率,增強項目的可維護性和擴展性。還好我們有個好的解決方案,可以進行模塊化開發,提升開發效率。以Vuex的模塊化爲例:
使用 Vuex 的module
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
module 的命名空間的高級用法
// 文件A
export default {
namespaced: true, // 命名空間避免重名
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
// 文件B
export default {
namespaced: true,
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
// 在moduleA文件引入文件A、文件B
import A from './A'
import B from './B'
export default {
A,
B
}
//在入口文件引入狀態管理器
import moduleA from './moduleA'
import moduleB from './moduleB' // 自己定義
import moduleC from './moduleC' // 自己定義
new Vuex.Store({
modules: {
...moduleA, // 模塊A
...moduleB, // 模塊B
...moduleC // 模塊C
}
})
Vuex 使用的小技巧
State倉庫字段太多怎麼維護 —— 使用函數
state有時候可能幾十個字段,有些字段代表不一樣的應用,我們可以使用函數來封裝,返回一個對象,再使用 Object.assign
合併對象
const initTableField = () => { // 表格字段
return {
id: '',
name: '',
password: '',
username: '',
number: false,
sort: false,
tel: false,
email: [],
....
}
}
const shopData = () => { // 商品字段
return {
price: '',
goods: [],
name: [],
param: {
searchValue: {},
page: {},
pageSize: {},
title: ''
},
....
}
const initState = () => {
return Object.assign(initTableField(), shopData(), {
...
})
}
const state = initState()
使用mapState, mapGetters, mapMutations, mapActions 輔助函數減少代碼量
mapState
// 在單獨構建的版本中輔助函數爲 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭頭函數可使代碼更簡練
count: state => state.count,
// 傳字符串參數 'count' 等同於 `state => state.count`
countAlias: 'count',
// 爲了能夠使用 `this` 獲取局部狀態,必須使用常規函數
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
mapGetters
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
mapMutations輔助函數
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`
// `mapMutations` 也支持載荷:
'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
})
}
}
mapActions輔助函數
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 將 `this.increment()` 映射爲 `this.$store.dispatch('increment')`
// `mapActions` 也支持載荷:
'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 將 `this.add()` 映射爲 `this.$store.dispatch('increment')`
})
}
}
模塊中使用輔助函數
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
computed: {
...mapState('模塊名', ['A', 'B', 'state變量']),// mapState爲例
...mapGetters('模塊名', ['A', 'B', 'getters變量']) // mapGetters爲例
},
methods: {
...mapMutations('模塊名', ['A', 'B', 'mutations方法名']),// mapMutations 爲例
...mapActions('模塊名', ['A', 'B', 'actions方法名']) // mapActions 爲例
}
}
在actions中使用 async/await 控制異步執行方法
actions可以定義異步方法,如果要控制異步接口的執行順序,可以使用 async/await
實現:
export default {
actions: {
async FUNCTIONA ({state, commit}, data) {
let result1 = await Func1(); // 調用異步方法Func1
let result2 = await Func2(); // 調研員異步方法Func2
... // 執行邏輯代碼
}
}
}