【Vue.js】Vuexで実装する状態管理パターン

2023年2月18日

Vuexには、Fluxに準拠した状態管理パターンの仕組みがあります。
これによって、あらかじめ決められた方法によってのみstateの変更を可能とし、storeを用いて一元的に管理できるようになります。

Vuexでは、いくつかのルールに従ってstateを管理することになります。

Componentsからdispatchを介してActionsにアクセスする
外部APIとのやりとりはActionsで行い、Mutationsに処理を渡す
Mutationsで値に加工を加え、stateを更新する
Dev toolとの連携はMutationsで行う

このように、決められた手順でのみstateの更新が可能になるため、stateの管理が容易になります。
また、storeでstateを一元管理することで直接依存関係のない複数のコンポーネント間でstateを共有することができます。

簡単なカウンターアプリで実装例を見てみましょう。

import { createStore } from 'vuex'

// storeを作成
export default createStore({
  state: {
    counter: 0,
  },
  mutations: {
　　　　　　　　// stateを更新するmutation
    mutateCounter(state, payload) {
      state.counter += payload.inc
    }
  },
  actions: {
    // mutationに処理を渡すcommmit
    actionCounter(store, payload) {
      store.commit('mutateCounter', payload)
    }
  }
})

vuexライブラリからcreateStoreをインポートし、状態の管理場所であるstoreを作成します。
storeの中には、上で説明したstate,mutations,actionsをそれぞれ作成します。

<template>
  <div id="app">
    <p>counter: {{ count }}</p>
    <button @click="onClickCount(1)">Count Up</button>
    <button @click="onClickCount(-1)">Count Down</button>
  </div>
</template>

<script>
export default {
  name: "app",
  computed: {
    count() {
　　　　　　　　　　　　// countが変更されるたびに再評価
      return this.$store.state.count
    }
  },
  methods: {
    incrementCount(n = 1) {
      // storeのdispatchにアクセス
      this.$store.dispatch('actionCounter', { inc: n })
    }
  }
};
</script>

componentからはthis.$storeでstoreにアクセスできます。

これでカウンターが作成できました。
Count Upボタンをクリックするとcountが増え、Count Downをクリックするとcountが減るのが確認できると思います。