Vuex はアプリケーション state の管理ライブラリであり Vue.js、 component アプリケーション内の異なる 間でデータを管理および同期できるようにします。 Vuex Flux アーキテクチャを実装しているため、アプリケーションの管理が簡単かつ効率的になります state。
の主要な概念は Vuex 次のとおりです。
1. State
in state は、 Vuex アプリケーションの一元化されたデータ ストアを表します。 異なる 間で共有する必要があるアプリケーションのデータを保持します component。 state で を 定義する例を次に示します Vuex。
2. Mutations
Mutations state 内の を変更する責任があります Vuex。 これらは、現在の値 state とペイロードを引数として受け取る同期関数です。 以下は、 で突然変異を定義する例です Vuex。
3. Actions
Actions mutations は、非同期操作を処理し、を変更するために ディスパッチするために使用されます state。 これらには、API 呼び出し、非同期タスク、または複雑なロジックを含めることができます。 でアクションを定義する例を次に示します Vuex。
4. Getters
Getters state ストアから 派生したデータを取得して計算できるようになります Vuex。 これらは、データを に返す前にデータにアクセスして操作するのに役立ちます component。 以下にゲッターを定義する例を示します Vuex。
Vuex プロジェクトに インストールするには Vue.js 、次の手順に従います。
ステップ 1: Vuex npm または Yarn 経由で インストールします。
また
ステップ 2: store.js
プロジェクトのルート ディレクトリにファイルを 作成します。 ここでアプリケーションを宣言し、管理します state。
ステップ 3: ファイル内で store.js
、 Vuex 新しいストア オブジェクトをインポートして作成します。
ステップ 4: ファイル内で main.js
ストアをインポートし、Vue アプリケーションにリンクします。
ステップ 5: Vuex これで、プロジェクトに インストールしてセットアップが完了しました。 ファイル内で state、 getters、 mutations、 を宣言し 、それらを Vue で使用できます 。 actions store.js
component
例:
ファイルでは、 次のように store.js
単純な突然変異を宣言できます。 state
Vue では、 および関数 を使用して、 および 突然変異を component 使用できます 。 state mapState
mapMutations
これらの手順により、インストールが完了し、アプリケーション の Vuex 管理に使用できるようになります 。 state Vue.js
を使用すると Vuex 、アプリケーションを簡単かつ一貫して管理できます state。 データ管理への構造化されたアプローチを提供しながら、コードの保守性と再利用性を強化します。