【学習記録㉒】Vuexのactionsを用いて非同期処理を実装する！

はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はactionsを用いて非同期の処理を実装します。

actionsとmutations

前回の記事ではmutationsを用いてstateへアクセスしていましたが、mutationsでは非同期の処理を書くことはできません。

Mutations Must Be Synchronous

非同期の処理を書くためにはactionsで非同期の処理を書きます。actionsはmutationsへ処理をcommit(委託)することで状態を変更しています。

実際にactionsへ非同期処理を書いてみる

今回は前回の記事で作成した「ボタンをクリックしたら数字がカウントアップされていく」という内容に非同期の処理を足してみます。
と言っても凄く単純で、「ボタンクリック後1秒経過したのちに数字がカウントアップされていく」というようにしていきます。

サンプルコード

store.js

import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    getters: {
        count: state => state.count
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        incrementAsync(context) {
            setTimeout(() => {
                context.commit('increment')
            }, 1000)
        }
    }
});

export default store;

count.vue

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count;
    },
  },
};
</script>

increment.vue

<template>
  <button @click="increment">+1</button>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.dispatch("incrementAsync");
    },
  },
};
</script>

結果

以下のようにクリック後、遅れてカウントアップされていることが分かります。

おわりに

今回はVuexのactionsについて学びました。
Vuexも色々と機能が多くて覚えるのが大変ですが、しっかりと理解して使いこなしていけるよう引き続き頑張っていきたいと思います。