Vuexのアクションを理解する

こにし じゅんぺい
Vue.js

Vuexのアクション（actions）は、
ミューテーションと似ていますが、

  • アクションは、状態を変更するのではなく、ミューテーションをコミットする。
  • アクションは任意の非同期処理を含むことができる。

という点で異なります。

全体の処理の流れとしては、コンポーネントからdispatchでアクションを呼び出し、アクション内で外部APIなどからの非同期処理を行った後、commitでミューテーションを使いステートを更新するという流れとなります。

dispatchはアクションを呼び出すメソッドです。
コンポーネントのmethodsで、下記の様に使用します。

1
2
3
4
5
6
7
8
9
 
methods: {
    clickPlus() {
      this.$store.dispatch('increment')
    },
    clickMinus() {
      this.$store.dispatch('decrement')
    }
 

また、dispatchは第2引数に任意で引数を渡すこともできます。

その後、ストアのactionsでcommitを呼び出します。

1
2
3
4
5
6
7
8
9
10
 
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement( { commit }) {
      commit('decrement')
    }
  },
 

そして、commitでミューテーションからステートを変更しています。

1
2
3
4
5
6
7
 
  mutations: {
    // カウントアップするミューテーションを登録
    increment: state => state.count++,
    decrement: state => state.count--
  }
 

アクションがあることで、アクション内で非同期処理を完了させてからコミットを一括で行うことができるようになります。
アクションでステートを変更するなどの処理以外を、アクション内で先に済ませるのが良いですね。

下記は、サンプルコードです。