Vuex は Vue.js アプリケーション向けの集中型状態管理パターンであり、複数コンポーネント間で共有されるデータを一元的に管理する仕組みを提供します。これにより、親子関係に依存しないコンポーネント間のデータ同期が容易になります。

Vuex の主要構成要素

state：アプリケーション全体の単一信頼源（single source of truth）となるデータストアです。

const state = {
  messageA: '',
  messageB: ''
}

getters：state の派生状態を計算するためのプロパティで、フィルタリングや集計処理に使用されます。

// 定義
getters: {
  largeNumbers: (state) => {
    return state.numbers.filter(n => n >= 10);
  }
}

// コンポーネント内での利用
this.$store.getters.largeNumbers;

mutations：state を同期的に変更する唯一の方法です。直接呼び出さず、commit 経由で実行します。

const mutations = {
  updateMessageA(state, payload) {
    state.messageA = payload.text;
  },
  updateMessageB(state, payload) {
    state.messageB = payload.text;
  }
}

// コンポーネントから呼び出し
this.$store.commit('updateMessageA', { text: '更新されたメッセージ' });

actions：非同期処理を含むロジックを記述し、最終的に mutation を commit して state を更新します。

const actions = {
  async fetchData({ commit }) {
    const response = await fetch('/api/data');
    const data = await response.json();
    commit('setData', data);
  }
}

// コンポーネントから呼び出し
this.$store.dispatch('fetchData');

modules：大規模アプリケーションでは、state・getters・mutations・actions を機能単位で分割し、名前空間付きのモジュールとして管理できます。

基本的な Vuex ストアの実装例

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      messageA: '',
      messageB: '',
      numbers: [3, 7, 12, 15, 2]
    };
  },
  getters: {
    largeNumbers: (state) => state.numbers.filter(n => n >= 10)
  },
  mutations: {
    updateMessageA(state, payload) {
      state.messageA = payload.text;
    },
    updateMessageB(state, payload) {
      state.messageB = payload.text;
    }
  },
  actions: {
    async delayUpdate({ commit }, payload) {
      await new Promise(resolve => setTimeout(resolve, 800));
      commit('updateMessageA', payload);
    }
  }
});

典型的な使用ケース

• ナビゲーションバーに表示される未読通知数やカートアイテム数
• ユーザー認証情報やテーマ設定などのグローバル状態
• 複数画面で参照・更新される共通データ（例：選択中のプロジェクト、フィルタ条件など）