挑戰全網最幽默的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 在使用體驗上面真的是用心良苦，用好這些輔助函式，將會大大增加我們的開發效率，當然，有任何問題，歡迎留言，咱們一起交流，

轉載宣告

作者：大宏說
鏈接：https://www.jianshu.com/p/c9b8bbaca875

后記

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

胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚，
胡哥有話說，專注于大前端技術領域，分享前端系統架構，框架實作原理，最新最高效的技術實踐！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/108303.html

標籤：JavaScript

上一篇：[推薦收藏]JavaScript書籍精讀筆記系列導航

下一篇：js點擊按鈕實作檔案上傳