Vueの状態共有と状態管理の比較ガイド

Vue 状態共有と状態管理の比較ガイド

Vueにおける状態の受け渡し方法と、状態管理ツール（Vuex・Pinia）の違いについて簡潔にまとめたガイドです。

---

1. Vueにおける状態共有の方法

1. Props

• 親 → 子 コンポーネントへのデータ受け渡しに使用
• コンポーネント階層が深くなると面倒
• 明示的に階層を辿って渡す必要がある

2. Provide / Inject

• 祖先 → 子孫 コンポーネントに直接データを渡す
• 中間コンポーネントを経由せずに共有できる
• Vue公式では、一般的な状態管理には非推奨

3. Store（グローバル状態管理）

• アプリ全体で状態を共有・管理するための手法
• 主に Vuex または Pinia を使用
• モジュール化や状態追跡、チーム開発に便利
• 状態の変更は mutation や action 経由で行う

---

2. Vuex vs Pinia 比較表

項目	Vuex	Pinia
リリース時期	Vue 2時代	Vue 3以降
公式性	Vue公式の管理ツール	Vue 3公式推奨の管理ツール
文法の複雑さ	高い（mutation/action 必須）	低い（Composition APIベース）
状態変更方法	mutation のみ	action で直接変更可能
TypeScript対応	弱い（設定が複雑）	完全対応（自動型推論あり）
構成	複雑（storeフォルダ分離）	シンプル（defineStoreで定義）
Devtools連携	あり	よりスムーズかつ直感的

---

💡 コード例

Pinia の例

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Vuex の例

import Vuex from 'vuex'

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

---

結論

• Vue 2 プロジェクト → Vuex 継続利用可能
• Vue 3 以降の新規開発 → Pinia 強く推奨！
• より簡潔で保守性が高く、型安全・開発効率が良い