菜菜菜的 Vue 30天 - Day28

actions

今天要介紹的是 actions，actions 其實跟前一章所介紹的 mutations 很類似，下面就來看一下 actions 要如何使用：

我們一樣就沿用上一章的範例來延伸，我們另外建立一個 actions 來去呼叫 mutations 來執行 count +1。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addCount (state) {
      state.count++
    }
  },
  actions: {
    addCount (context) {
      context.commit('addCount')
    }
  }
})

actions 內能夠帶一個 context 的參數，他會是能夠使用跟 store 使用相同的方法，所以我們能夠透過 context.state、context.getters 來使用 state 及 getters ...等。

那我們要在 actions 內使用 mutations 就能透過 context.commit()來呼叫 mutations。

另外我們也能夠使用 ES6 的解構賦值的方式來直接指應我們要使用的方法，如下：

actions: {
    addCount ({ commit }) {
      commit('addCount')
    }
  }

至於 actions 要怎麼呼叫呢？

其實就跟 mutations 很類似，在 actions 該使用的是 dispatch 來執行呼叫，如下：

this.$store.dispatch('addCount');

當然我們使用 dispath 呼叫 actions 也能像 dispath 一樣帶參數進去做使用。

store.dispatch('incrementAsync', 10)

store.dispatch('incrementAsync', {
  amount: 10
})

store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

這樣能夠在 actions 裡面使用帶進來的參數了

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addCount (state, payload) {
      state.count += payload
    }
  },
  actions: {
    addCount (context, payload) {
      context.commit('addCount', payload)
    }
  }
})

以上就是 actions 的介紹，下一章會介紹 module 的部分。