iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

菜菜菜的 Vue 30天系列 第 28

Vuex(actions)

菜菜菜的 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.statecontext.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 的部分。


上一篇
Vuex(mutations)
下一篇
Vuex(modules)
系列文
菜菜菜的 Vue 30天30

尚未有邦友留言

立即登入留言