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

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

という点で異なります。

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

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


methods: {
    clickPlus() {
      this.$store.dispatch('increment')
    },
    clickMinus() {
      this.$store.dispatch('decrement')
    }

methods: {

clickPlus() {

this.$store.dispatch('increment')

clickMinus() {

this.$store.dispatch('decrement')

}

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

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


  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement( { commit }) {
      commit('decrement')
    }
  },

actions: {

increment({ commit }) {

commit('increment')

decrement( { commit }) {

commit('decrement')

}

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


  mutations: {
    // カウントアップするミューテーションを登録
    increment: state =&gt; state.count++,
    decrement: state =&gt; state.count--
  }

mutations: {

// カウントアップするミューテーションを登録

increment: state => state.count++,

decrement: state => state.count--

}

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

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