先說兩句 前面已經講完了 Vuex 下的 、 、 及 這四駕馬車，不知道大家是否已經理解。當然，要想真正熟練掌握的話，還是需要不斷的練習和動手實踐才行。 其實只要把這四駕馬車完全熟練駕馭了，那麼應對一些中小型的項目，基本上就已經沒啥問題了，後面的 Module 這架終極馬車，其實是為了搞定那些稍微大 ...
先說兩句
前面已經講完了 Vuex 下的 State、Getter、Mutation 及 Action 這四駕馬車，不知道大家是否已經理解。當然，要想真正熟練掌握的話，還是需要不斷的練習和動手實踐才行。
其實只要把這四駕馬車完全熟練駕馭了，那麼應對一些中小型的項目，基本上就已經沒啥問題了，後面的 Module 這架終極馬車，其實是為了搞定那些稍微大型複雜一點的項目，避免 store 裡面的數據太多，難以管理而設計，這駕馬車稍微比較抽象，不太好駕馭，我們下一講再來詳細的去剖解它。
Vue 裡面的很多配套設施，在使用體驗上一直都追求著簡潔，追求著極致，哪裡不爽改哪裡，所以這也是為什麼 Vue 能夠長時間深得民心的一個很重要的原因所在。那麼這一講，主要就和大家簡單的聊一聊 Vuex 的一些常用的輔助函數。
mapState
通過前面的學習，我們知道，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態。
那麼，當一個組件需要獲取多個狀態的時候，怎麼辦？是不是這樣：
export default {
...
computed: {
a () {
return store.state.a
},
b () {
return store.state.b
},
c () {
return store.state.c
},
...
}
}
當然，這樣是沒問題的，但是總感覺寫起來很難受，看起來更難受是吧！既然這麼容易我們就感受到了，Vuex 能感受不到嗎，能忍得了嗎？
絕對不能忍，所以 mapState 輔助函數被創造了出來，用來搞定這個人人為之咬牙切齒的痛點。
// 在單獨構建的版本中輔助函數為 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭頭函數可使代碼更簡練
a: state => state.a,
b: state => state.b,
c: state => state.c,
// 傳字元串參數 'b'
// 等同於 `state => state.b`
bAlias: 'b',
// 為了能夠使用 `this` 獲取局部狀態
// 必須使用常規函數
cInfo (state) {
return state.c + this.info
}
})
}
通過上面的示例，可以瞭解到，我們可以直接把需要用到的狀態全部存放在 mapState 裡面進行統一管理，而且還可以取別名，做額外的操作等等。
如果所映射的計算屬性名稱與 state 的子節點名稱相同時，我們還可以更加簡化，給 mapState 傳一個字元串數組：
computed: mapState([
// 映射 this.a 為 store.state.a
'a',
'b',
'c'
])
因為 computed 這個計算屬性接收的是一個對象，所以由上面的示例代碼可以看出，mapState 函數返回的是一個對象，現在如果想要和局部的計算屬性混合使用的話，可以使用 ES6 的語法這樣寫來大大簡化：
computed: {
localComputed () {
...
},
// 使用對象展開運算符將此對象混入到外部對象中
...mapState({
// ...
})
}
瞭解了 mapState 輔助函數後，接下來的幾個輔助函數的用法也基本上都差不多了，我們繼續往下看。
mapGetters
這個和 mapState 基本上沒啥區別，簡單看下官方的例子，就懂了：
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'
})
}
}
想要在組件中調用，直接 this.xxx 就完了。
寫在最後
不得不說，Vuex 在使用體驗上面真的是用心良苦，用好這些輔助函數，將會大大增加我們的開發效率，當然，有任何問題，歡迎留言，咱們一起交流。
轉載聲明
作者：大巨集說
鏈接：https://www.jianshu.com/p/c9b8bbaca875
後記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得點贊、收藏呦，關註胡哥有話說，學習前端不迷路，歡迎多多留言交流...
胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。
胡哥有話說，專註於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！
