Vuexを使ってみる

Vue.jsでの状態(データ)を一括で管理するためのライブラリ「Vuex」を使ってみます。
今回はVue CLIの環境で、バージョンはそれぞれvue-cliが5.0.4、vue.jsが3.2.36、vuexが4.0.2を使用しています。

サンプルコード

Vue CLIの開発環境でsrc/store/index.jsを開きます。
初期状態は以下のようになっています。

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

まずはstateを使ってみます。
stateは状態(データ)を保存する場所で、例としてcountというデータを追加してみます。

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

実際にstateの中身を確認するため、getterも追加してみます。
getterはstateの値などを取得する際に使用されます。

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

これでstateの値を取得する準備ができたので、src/views/HomeView.vueでgetterを使ってみます。

<template>
  <div class="home">
    <p>{{ count }}</p>
  </div>
</template>

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

this.$store.getters.getCountとすることで取得ができます。

次にstateの値の変更を試してみます。
stateの値の変更はmutationを使って行います。

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  mutations: {
    countUpdate(state, payload) {
      state.count += payload;
    }
  },
  actions: {
  },
  modules: {
  }
})

第二引数(payload)で値を受け取ることができます。

これでmutationを使う準備ができたので、vueファイル内で実際に使ってみます。
ボタンをクリックするとcountが1ずつ増えるようにしてみます。

<template>
  <div class="home">
    <p>{{ count }}</p>
    <button @click="buttonEvent">button</button>
  </div>
</template>

mutationを使う際にはstore.commitを使用します。

<script>
export default {
  name: 'HomeView',
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    buttonEvent() {
      this.$store.commit('countUpdate', 1);
    }
  }
}
</script>

commitの第一引数にmutationの名前、第二引数に渡す値を設定します。
これでボタンクリック毎にカウントアップするようになりました。

次にactionですが、非同期な処理を含む場合などmutationで行えない処理を行った上で、mutationを使ってstateの変更を行います。

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  mutations: {
    countUpdate(state, payload) {
      state.count += payload;
    }
  },
  actions: {
    delayCount(context, payload) {
      setTimeout(function() {
        context.commit('countUpdate', payload);
      }, 3000);
    }
  },
  modules: {
  }
})

setTimeout()を使って、一定時間後にstateが変更されるようにしました。
actionはmutationと同様、第二引数(payload)で値を受け取ることができます。

action用のボタンを追加して、動作を確認してみます。

<template>
  <div class="home">
    <p>{{ count }}</p>
    <button @click="buttonEvent">button</button>
    <button @click="delayEvent">delay button</button>
  </div>
</template>

actionを使う際にはstore.dispatchを使用します。

<script>
export default {
  name: 'HomeView',
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    buttonEvent() {
      this.$store.commit('countUpdate', 1);
    },
    delayEvent() {
      this.$store.dispatch('delayCount', 1);
    }
  }
}
</script>

dispatchは第一引数にactionの名前、第二引数に渡す値を設定します。
これでボタンクリック後、3秒経過後にカウントアップされるようになりました。