前言

各位捧由，相信經過幾天的研究後，我們現在對Vuex都有多一些的瞭解啦！
不曉得各位有沒有覺得，在 Vue 元件中使用時，要一直用到 this.$store.state 、 this.$store.dispatch　很麻煩呢？
不想要過多的重複勞動，也想讓程式碼更簡潔的話，我們就來研究一下 Vuex 的輔助函數吧！

mapState

state 可以使用輔助參數就是 mapState，在 Vue 元件中怎麼使用呢？
首先要 import

import { mapState } from 'vuex'

以這段作為範例，如何使用 mapState 簡潔我們的程式碼呢？

export default {
  // ...
  computed: {
    count () {
      return this.$store.state.countModules.count
    }
  }
}

• 可以使用箭頭函式

export default {
  // ...
  computed: mapState({
    count: state => state.count,
    }
  })
}

• 可以傳字串作為參數，等同 state => state.count

export default {
  // ...
  computed: mapState({
    countAlias: 'count',
  })
}

• 為了能夠使用 this 獲取局部狀態，必須使用常規函數

export default {
  // ...
  computed: mapState({
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

• 使用 ES6 的展開運算符，將此對象混入到外部對象中

computed: {
  localComputed () { /* ... */ },
  ...mapState(['count'])
}

而且可以放不只一個哦，假設我們除了 count 還有 stateA、stateB，就可這樣用

computed: {
  localComputed () { /* ... */ },
  ...mapState(['count','stateA','stateB'])
}

• 帶命名的模組對象如何使用？
  假設我們的 count 放在 countModule 帶命名模組中，是模組區域變數
  sateA 、 stateB 是全域變數，這樣如何使用呢？
  很簡單，只要把模組名稱帶入前面就可以，如下：

computed: {
  localComputed () { /* ... */ },
  ...mapState('countModules',['count'])
  ...mapState(['moduleA','moduleB'])
}

mapGetters、mapMutations、mapActions

經過上面 mapState 的研究，我們對於使用方式應有一定的了解了
換作 mapGetters 、 mapMutations 、 mapActions 其實也都大同小異，一樣我們需要先 import

import { mapGetters , mapMutations , mapActions } from 'vuex'

將 getter 混入 computed 中

getter 部分跟 state 差不多，就不多補充說明囉！

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

將 mutations、actions 混入 methods 中

以這段作為範例，要如何使用mapActions呢？

export default {
  methods: {
    updateCount () {
      this.$store.dispatch('updateCount')
    }
  },
}

• 使用ES6的展開運算符，將此對象混入到外部對象中

export default {
  // ...
  methods: {
    ...mapActions(['updateCount'])
  }
}

• 如果要傳參數怎麼辦呢？
  假設今天 updateCount 要增加多少數量，要另外傳參數進入，如下範例：

export default {
  methods: {
    updateCount (num) {
      this.$store.dispatch('updateCount', num)
    }
  },
}

其實沒關係，不用額外寫什麼，直接可以傳。

export default {
  // ...
  methods: {
    ...mapActions(['updateCount']),
    //this.$store.dispatch('updateCount', num)
  }
}

• 如何使用不同的命名呢？

export default {
  // ...
  methods: {
    ...mapActions({
      add: 'updateCount'
    })
  }
}

• 帶命名模組的 actions 如何使用呢？
  一樣是把模組名稱帶入前面就可以，如下：

export default {
  // ...
  methods: {
    ...mapActions('countModules',['updateCount']),
    })
  }
}

• mutations 部分跟 actions 差不多，就不補充說明囉。

export default {
  // ...
  methods: {
    ...mapMutations([
      'updateCount', 
      'updateCountBy' 
    ]),
    ...mapMutations({
      add: 'updateCount' 
    })
  }
}