先說(shuō)兩句

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

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

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

mapState

通過(guò)前面的學(xué)習(xí)，我們知道，從 store 實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)。

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

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

當(dāng)然，這樣是沒(méi)問(wèn)題的，但是總感覺(jué)寫起來(lái)很難受，看起來(lái)更難受是吧！既然這么容易我們就感受到了，Vuex 能感受不到嗎，能忍得了嗎？

絕對(duì)不能忍，所以 mapState 輔助函數(shù)被創(chuàng)造了出來(lái)，用來(lái)搞定這個(gè)人人為之咬牙切齒的痛點(diǎn)。

// 在單獨(dú)構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函數(shù)可使代碼更簡(jiǎn)練
    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
    }
  })
}

通過(guò)上面的示例，可以了解到，我們可以直接把需要用到的狀態(tài)全部存放在 mapState 里面進(jìn)行統(tǒng)一管理，而且還可以取別名，做額外的操作等等。

如果所映射的計(jì)算屬性名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們還可以更加簡(jiǎn)化，給 mapState 傳一個(gè)字符串?dāng)?shù)組：

computed: mapState([
  // 映射 this.a 為 store.state.a
  'a',
  'b',
  'c'
])

因?yàn)?computed 這個(gè)計(jì)算屬性接收的是一個(gè)對(duì)象，所以由上面的示例代碼可以看出，mapState 函數(shù)返回的是一個(gè)對(duì)象，現(xiàn)在如果想要和局部的計(jì)算屬性混合使用的話，可以使用 ES6 的語(yǔ)法這樣寫來(lái)大大簡(jiǎn)化：

computed: {
  localComputed () { 
    ...
  },
  // 使用對(duì)象展開(kāi)運(yùn)算符將此對(duì)象混入到外部對(duì)象中
  ...mapState({
    // ...
  })
}

了解了 mapState 輔助函數(shù)后，接下來(lái)的幾個(gè)輔助函數(shù)的用法也基本上都差不多了，我們繼續(xù)往下看。

mapGetters

這個(gè)和 mapState 基本上沒(méi)啥區(qū)別，簡(jiǎn)單看下官方的例子，就懂了：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

取個(gè)別名，那就用對(duì)象的形式，以下示例的意思就是把 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' 
    })
  }
}

簡(jiǎn)直不要太好用，連載荷也可以直接支持。

mapActions

和 mapMutations 用法一模一樣，換個(gè)名字即可。

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 就完了。

寫在最后

不得不說(shuō)，Vuex 在使用體驗(yàn)上面真的是用心良苦，用好這些輔助函數(shù)，將會(huì)大大增加我們的開(kāi)發(fā)效率，當(dāng)然，有任何問(wèn)題，歡迎留言，咱們一起交流。

最后一講「Vuex白話教程第六講：Vuex的管理員Module（實(shí)戰(zhàn)篇）」