先說兩句
前面已經(jīng)講完了 Vuex 下的 State惶我、Getter接箫、Mutation 及 Action 這四駕馬車，不知道大家是否已經(jīng)理解茄猫。當(dāng)然狈蚤，要想真正熟練掌握的話困肩，還是需要不斷的練習(xí)和動手實踐才行划纽。
其實只要把這四駕馬車完全熟練駕馭了，那么應(yīng)對一些中小型的項目锌畸，基本上就已經(jīng)沒啥問題了勇劣，后面的 Module 這架終極馬車，其實是為了搞定那些稍微大型復(fù)雜一點的項目，避免 store 里面的數(shù)據(jù)太多比默，難以管理而設(shè)計幻捏，這駕馬車稍微比較抽象，不太好駕馭命咐，我們下一講再來詳細(xì)的去剖解它篡九。
Vue 里面的很多配套設(shè)施，在使用體驗上一直都追求著簡潔醋奠，追求著極致榛臼，哪里不爽改哪里，所以這也是為什么 Vue 能夠長時間深得民心的一個很重要的原因所在窜司。那么這一講沛善，主要就和大家簡單的聊一聊 Vuex 的一些常用的輔助函數(shù)。
mapState
通過前面的學(xué)習(xí)塞祈，我們知道金刁，從 store 實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)。
那么议薪，當(dāng)一個組件需要獲取多個狀態(tài)的時候尤蛮，怎么辦？是不是這樣：
export default {
...
computed: {
a () {
return store.state.a
},
b () {
return store.state.b
},
c () {
return store.state.c
},
...
}
}
當(dāng)然斯议，這樣是沒問題的抵屿，但是總感覺寫起來很難受，看起來更難受是吧捅位！既然這么容易我們就感受到了轧葛，Vuex 能感受不到嗎，能忍得了嗎艇搀？
絕對不能忍尿扯，所以 mapState 輔助函數(shù)被創(chuàng)造了出來，用來搞定這個人人為之咬牙切齒的痛點焰雕。
// 在單獨構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭頭函數(shù)可使代碼更簡練
a: state => state.a,
b: state => state.b,
c: state => state.c,
// 傳字符串參數(shù) 'b'
// 等同于 `state => state.b`
bAlias: 'b',
// 為了能夠使用 `this` 獲取局部狀態(tài)
// 必須使用常規(guī)函數(shù)
cInfo (state) {
return state.c + this.info
}
})
}
通過上面的示例衷笋，可以了解到，我們可以直接把需要用到的狀態(tài)全部存放在 mapState 里面進行統(tǒng)一管理矩屁，而且還可以取別名辟宗，做額外的操作等等。
如果所映射的計算屬性名稱與 state 的子節(jié)點名稱相同時吝秕，我們還可以更加簡化泊脐，給 mapState 傳一個字符串?dāng)?shù)組：
computed: mapState([
// 映射 this.a 為 store.state.a
'a',
'b',
'c'
])
因為 computed 這個計算屬性接收的是一個對象，所以由上面的示例代碼可以看出烁峭，mapState 函數(shù)返回的是一個對象容客，現(xiàn)在如果想要和局部的計算屬性混合使用的話秕铛，可以使用 ES6 的語法這樣寫來大大簡化：
computed: {
localComputed () {
...
},
// 使用對象展開運算符將此對象混入到外部對象中
...mapState({
// ...
})
}
了解了 mapState 輔助函數(shù)后，接下來的幾個輔助函數(shù)的用法也基本上都差不多了缩挑，我們繼續(xù)往下看但两。
mapGetters
這個和 mapState 基本上沒啥區(qū)別，簡單看下官方的例子供置，就懂了：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
取個別名谨湘，那就用對象的形式，以下示例的意思就是把 this.doneCount 映射為 this.$store.getters.doneTodosCount芥丧。
mapGetters({
doneCount: 'doneTodosCount'
})
mapMutations
直接看示例代碼：
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
// 將 `this.increment()` 映射為
// `this.$store.commit('increment')`
'increment',
// `mapMutations` 也支持載荷：
// 將 `this.incrementBy(amount)` 映射為
// `this.$store.commit('incrementBy', amount)`
'incrementBy'
]),
...mapMutations({
// 將 `this.add()` 映射為
// `this.$store.commit('increment')`
add: 'increment'
})
}
}
簡直不要太好用悲关，連載荷也可以直接支持。
mapActions
和 mapMutations 用法一模一樣娄柳，換個名字即可寓辱。
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
// 將 `this.increment()` 映射為
// `this.$store. dispatch('increment')`
'increment',
// `mapActions` 也支持載荷：
// 將 `this.incrementBy(amount)` 映射為
// `this.$store. dispatch('incrementBy', amount)`
'incrementBy'
]),
...mapActions({
// 將 `this.add()` 映射為
// `this.$store. dispatch('increment')`
add: 'increment'
})
}
}
想要在組件中調(diào)用，直接 this.xxx 就完了赤拒。
寫在最后
不得不說秫筏，Vuex 在使用體驗上面真的是用心良苦，用好這些輔助函數(shù)挎挖，將會大大增加我們的開發(fā)效率这敬，當(dāng)然，有任何問題蕉朵，歡迎留言崔涂，咱們一起交流。
