Vuex白話教程第五講：Vuex的小幫手

 

先說兩句

前面已經講完了 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 在使用體驗上面真的是用心良苦，用好這些輔助函數，將會大大增加我們的開發效率，當然，有任何問題，歡迎留言，咱們一起交流。