iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

30天小老闆系列(1)--線上排班小工具系列 第 12

DAY12 資料室--Vuex輔助函數讓代碼更簡潔

前言

各位捧由,相信經過幾天的研究後,我們現在對Vuex都有多一些的瞭解啦!
不曉得各位有沒有覺得,在 Vue 元件中使用時,要一直用到 this.$store.statethis.$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 還有 stateAstateB,就可這樣用

computed: {
  localComputed () { /* ... */ },
  ...mapState(['count','stateA','stateB'])
}
  • 帶命名的模組對象如何使用?
    假設我們的 count 放在 countModule 帶命名模組中,是模組區域變數
    sateAstateB 是全域變數,這樣如何使用呢?
    很簡單,只要把模組名稱帶入前面就可以,如下:
computed: {
  localComputed () { /* ... */ },
  ...mapState('countModules',['count'])
  ...mapState(['moduleA','moduleB'])
}

mapGetters、mapMutations、mapActions

經過上面 mapState 的研究,我們對於使用方式應有一定的了解了
換作 mapGettersmapMutationsmapActions 其實也都大同小異,一樣我們需要先 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' 
    })
  }
}

上一篇
DAY11 資料室--Vuex模組作用域略說
下一篇
DAY13 資料室--Vuex載荷Payload
系列文
30天小老闆系列(1)--線上排班小工具30

尚未有邦友留言

立即登入留言