vuex-vue2

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Vue 2 プロジェクトに Vuex をインストールしてセットアップする
• Vuex でアプリケーションの状態を管理する
• Vue コンポーネントで Vuex ストアを使用する
• Vuex の基本概念（state、getters、mutations、actions）を理解する
• 大規模なアプリケーションで Vuex モジュールを使用する
• Vuex プラグインと開発者ツールを扱う
• Vuex API とメソッドを理解する
• Vuex の問題をトラブルシューティングする

このスキルの使用方法

このスキルは、Vuex 公式ドキュメントの構成（https://vuex.vuejs.org/zh/、https://vuex.vuejs.org/zh/guide/、https://vuex.vuejs.org/zh/api/）に合わせて整理されています。Vuex を使用する際は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • Installation/安装 → examples/guide/installation.md
   • Quick Start/快速开始 → examples/guide/quick-start.md
   • Core Concepts/核心概念 → examples/core-concepts/
   • Advanced/高级 → examples/advanced/
   • API/API 文档 → api/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   ガイド（使用指南）:

   • examples/guide/intro.md - Vuex の紹介
   • examples/guide/installation.md - インストールガイド
   • examples/guide/quick-start.md - クイックスタートガイド
   • examples/guide/what-is-vuex.md - Vuex とは

   基本概念（核心概念）:

   • examples/core-concepts/state.md - State
   • examples/core-concepts/getters.md - Getters
   • examples/core-concepts/mutations.md - Mutations
   • examples/core-concepts/actions.md - Actions
   • examples/core-concepts/modules.md - Modules

   応用（高级）:

   • examples/advanced/plugins.md - プラグイン
   • examples/advanced/strict-mode.md - 厳格モード
   • examples/advanced/form-handling.md - フォームの処理
   • examples/advanced/testing.md - テスト
   • examples/advanced/hot-reload.md - ホットリロード

3. 構文、構成、ベストプラクティスについて、そのサンプルファイルに記載された具体的な指示に従います。

   重要な注意事項:

   • Vuex は Vue 2.x 向けです
   • ストアは状態管理の中心となります
   • State はリアクティブです
   • Mutations は同期処理です
   • Actions は非同期処理です
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

   • api/store-api.md - Store API
   • api/state-api.md - State API
   • api/getters-api.md - Getters API
   • api/mutations-api.md - Mutations API
   • api/actions-api.md - Actions API
   • api/modules-api.md - Modules API
   • api/plugins-api.md - Plugins API

5. templates/ ディレクトリのテンプレートを使用します。

   • templates/installation.md - インストール用テンプレート
   • templates/store-setup.md - ストアのセットアップ用テンプレート
   • templates/component-usage.md - コンポーネントの使用方法のテンプレート

1. Vuex の理解

Vuex は、Vue.js アプリケーション向けの状態管理パターンおよびライブラリです。アプリケーション内のすべてのコンポーネントで使用する一元管理されたストアとして機能します。

主な概念:

• Store：一元管理された状態コンテナー
• State：アプリケーションの状態（データ）
• Getters：ストアの算出プロパティ
• Mutations：同期的な状態変更
• Actions：非同期処理
• Modules：ストアの構成単位

2. インストール

npm を使用する場合:

npm install vuex@3

yarn を使用する場合:

yarn add vuex@3

CDN を使用する場合:

<script src="https://unpkg.com/vuex@3"></script>

3. 基本的なセットアップ

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

// main.js
import Vue from 'vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

ドキュメントの対応関係（公式ドキュメントとの一対一対応）

• examples/guide/ または examples/getting-started/ → https://vuex.vuejs.org/zh/guide/
• api/ → https://vuex.vuejs.org/zh/api/

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は examples/ ディレクトリにあります（上記の対応表を参照してください）。

例を使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応表から適切な例のファイルを読み込みます
• そのファイルの指示、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• 一般的なスキャフォールディングについては、templates/ ディレクトリのテンプレートを参照します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは、公式の Vuex API ドキュメントの構成（https://vuex.vuejs.org/zh/api/）に合わせて整理され、`api/` ディレクトリに用意されています。

Store API (api/store-api.md)

• Store コンストラクターのオプション
• Store インスタンスのプロパティ
• Store インスタンスのメソッド

State API (api/state-api.md)

• State の定義
• State へのアクセス
• State のリアクティビティ

Getters API (api/getters-api.md)

• Getter の定義
• Getter へのアクセス
• Getter の引数

Mutations API (api/mutations-api.md)

• Mutation の定義
• Mutation のコミット
• Mutation のペイロード

Actions API (api/actions-api.md)

• Action の定義
• Action のディスパッチ
• Action のコンテキスト

Modules API (api/modules-api.md)

• Module の定義
• Module の名前空間
• Module の登録

Plugins API (api/plugins-api.md)

• Plugin の定義
• Plugin の使用方法
• 組み込みプラグイン

API リファレンスを使用するには：

1. 必要な API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、例を確認します
4. 詳しい使用パターンについては、リンク先の例のファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連する例のファイルへのリンクが含まれています

ベストプラクティス

1. 同期的な変更にはミューテーションを使用します：ミューテーションは同期的でなければなりません
2. 非同期処理にはアクションを使用します：アクションには非同期処理を含めることができます
3. state を正規化します：ネストされた state 構造は避けます
4. 大規模なアプリではモジュールを使用します：モジュールでストアを整理します
5. 算出 state には getter を使用します：getter で state から値を導出します
6. 命名規則に従います：一貫した命名パターンを使用します
7. TypeScript を使用します：TypeScript を活用して型安全性を確保します

リソース

• 公式ドキュメント：https://vuex.vuejs.org/zh/
• ガイド：https://vuex.vuejs.org/zh/guide/
• API ドキュメント：https://vuex.vuejs.org/zh/api/
• GitHub リポジトリ：https://github.com/vuejs/vuex

キーワード

Vuex, vuex, Vue 2, state management, 状態管理, store, state, getters, mutations, actions, modules, ストレージ, 状態, getter, 変更, アクション, モジュール, Vuex store, Vuex state, Vuex getters, Vuex mutations, Vuex actions, Vuex modules, Vuex plugins, 集中管理された state, リアクティブな state, 同期的なミューテーション, 非同期アクション