| 種類 | 具体例 | 理由 |
|---|---|---|
| 認証情報 | ログインユーザーのID、名前、トークン | どのページでも必要になる |
| カートの中身 | 商品リスト、個数 | 商品ページと決済ページで共有するから |
| APIで取得したデータ | ユーザー一覧、商品一覧 | ページ間で同じデータが必要 |
| UIの状態（一部） | ローディング状態、モーダルの開閉 | いろんな画面で状態を知りたい |
| 現在の言語 | 'ja' / 'en' / 'zh' など | 多言語対応でアプリ全体に影響するから |
| 種類 | 具体例 | 理由 |
|---|---|---|
| 一時的なフォーム入力値 | 入力中のユーザー名、パスワードなど | そのページだけで使うのでコンポーネント内のdataでOK |
| 一覧ページのページネーション | 今のページ番号、表示件数 | そのページだけの状態で十分 |
| ローカルなモーダル開閉 | 一個のモーダルがそのページ専用の場合 | わざわざグローバルにしなくてよい |
Vuexは冷蔵庫みたいなもの。
家族みんなで使う食材（牛乳、卵、野菜）は冷蔵庫に入れる。
でも個人のお弁当は冷蔵庫に入れない（自分のカバンに入れる）。
→ 全員で共有するもの＝Vuex
→ その場だけで使うもの＝data()やref()
✅ そのデータは「画面をまたいで使う？」
→ YES → Vuexに入れる
→ NO → コンポーネント内で完結