先說兩句
前面已經講完了 Vuex 下的 State、Getter、Mutation 及 Action 這四駕馬車，不知道你們是否已經理解。固然，要想真正熟練掌握的話，仍是須要不斷的練習和動手實踐才行。前端
其實只要把這四駕馬車徹底熟練駕馭了，那麼應對一些中小型的項目，基本上就已經沒啥問題了，後面的 Module 這架終極馬車，實際上是爲了搞定那些稍微大型複雜一點的項目，避免 store 裏面的數據太多，難以管理而設計，這駕馬車稍微比較抽象，不太好駕馭，咱們下一講再來詳細的去剖解它。vue
Vue 裏面的不少配套設施，在使用體驗上一直都追求着簡潔，追求着極致，哪裏不爽改哪裏，因此這也是爲何 Vue 可以長時間深得民心的一個很重要的緣由所在。那麼這一講，主要就和你們簡單的聊一聊 Vuex 的一些經常使用的輔助函數。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 傳一個字符串數組：this
computed: mapState([ // 映射 this.a 爲 store.state.a 'a', 'b', 'c' ])
由於 computed 這個計算屬性接收的是一個對象，因此由上面的示例代碼能夠看出，mapState 函數返回的是一個對象，如今若是想要和局部的計算屬性混合使用的話，可使用 ES6 的語法這樣寫來大大簡化：spa
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
後記
以上就是胡哥今天給你們分享的內容，喜歡的小夥伴記得點贊、收藏呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流...
胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。 胡哥有話說，專一於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！