先說兩句

前面已經(jīng)講完了 Vuex 下的 State、Getter、Mutation 及 Action 這四駕馬車，不知道大家是否已經(jīng)理解。當然，要想真正熟練掌握的話，還是需要不斷的練習和動手實踐才行。

其實只要把這四駕馬車完全熟練駕馭了，那么應對一些中小型的項目，基本上就已經(jīng)沒啥問題了，后面的 Module 這架終極馬車，其實是為了搞定那些稍微大型復雜一點的項目，避免 store 里面的數(shù)據(jù)太多，難以管理而設(shè)計，這駕馬車稍微比較抽象，不太好駕馭，我們下一講再來詳細的去剖解它。

Vue 里面的很多配套設(shè)施，在使用體驗上一直都追求著簡潔，追求著極致，哪里不爽改哪里，所以這也是為什么 Vue 能夠長時間深得民心的一個很重要的原因所在。那么這一講，主要就和大家簡單的聊一聊 Vuex 的一些常用的輔助函數(shù)。

mapState

通過前面的學習，我們知道，從 store 實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)。

那么，當一個組件需要獲取多個狀態(tài)的時候，怎么辦？是不是這樣：

export default {
  ...
  computed: {
      a () {
        return store.state.a
      },
      b () {
        return store.state.b
      },
      c () {
        return store.state.c
      },
      ...
   }
}

當然，這樣是沒問題的，但是總感覺寫起來很難受，看起來更難受是吧！既然這么容易我們就感受到了，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 傳一個字符串數(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ā)效率，當然，有任何問題，歡迎留言，咱們一起交流。

轉(zhuǎn)載聲明

作者：大宏說
鏈接：http://www.itdecent.cn/p/c9b8bbaca875

后記

以上就是胡哥今天給大家分享的內(nèi)容，喜歡的小伙伴記得點贊、收藏呦，關(guān)注胡哥有話說，學習前端不迷路，歡迎多多留言交流...

胡哥有話說，一個有技術(shù)，有情懷的胡哥！現(xiàn)任京東前端攻城獅一枚。
胡哥有話說，專注于大前端技術(shù)領(lǐng)域，分享前端系統(tǒng)架構(gòu)，框架實現(xiàn)原理，最新最高效的技術(shù)實踐！