Vuex を使用して Vue でグローバル状態を管理する詳細な説明と例

Vue.js は、多くの便利な機能を提供する人気のフロントエンド フレームワークですが、アプリケーションがますます複雑になると、大量のデータを子コンポーネントに渡すことが非常に困難になることがすぐにわかります。これが、Vuex が Vue において非常に重要になる理由です。 Vuex は、データと状態の共有を容易にするグローバル状態マネージャーです。この記事では、Vuex の仕組みを詳しく説明し、Vuex を Vue アプリケーションに統合する方法を示します。

Vuex とは

Vuex は、Vue.js アプリケーションの状態管理モデルおよびライブラリであり、クロスレベル、マルチコンポーネント、およびマルチページの状態共有の問題を解決するためによく使用されます。 。アプリケーションの状態を 1 つのストアに集中化し、共有状態を実装するメカニズムを提供します。アプリケーションのライフサイクル全体を通じて、アプリケーションのすべての状態を管理するために使用されます。

Vuex

Vuex の核となる概念は、次の 4 つの核となる部分で構成されます。

state

State は、Vuex によって管理されるアプリケーション状態の保存領域です。 State は、アプリケーションの状態を保存するために使用されるプレーンな JavaScript オブジェクトです。状態を宣言するときは、オブジェクトを定義します。次の例では、単純な状態オブジェクトを定義します:

const state = {
    count: 0
}

getter

Getter は、状態からデータを取得するために使用されます。取得されたデータは、次のように、現在の状態に基づいて何らかの処理を行った後に返されます。計算された状態のプロパティ。

const getters = {
  getCount(state) {
    return state.count + 1;
  }
}

mutations

ミューテーションは、データの一方向操作を保証するために使用されます。つまり、ミューテーションはデータを変更できますが、データを取得することはできません。 Mutation は状態を変更するために使用され、状態を非同期に操作することはできません。状態を変更するには commit メソッドを使用する必要があります。

const mutations = {
  increment(state) {
    state.count++
  }
}

actions

アクションは非同期操作を処理するために使用され、実際には標準のミューテーションをトリガーします。これにより、状態を直接変更せずに、状態に関するすべての更新をカプセル化できます。たとえば、アプリケーションで非同期リクエストを送信したい場合、それを処理する側でアクションを呼び出すことができます。

const actions = {
   incrementByAsync({commit}) {
     setTimeout(() => {
       commit('incrementByAsync')
     }, 1000)
   }
 }

Vuex カウンターのサンプルの実装

私が公開した [Vue-cli 3](https://www.npmjs.com/package/vue-cli) サンプル プロジェクトを使用します。公式のスキャフォールディングを通じて Vue プロジェクトを初期化します。

$ vue create vuex-example

次に、vuex をインストールします:

$ npm install vuex --save

次に、数値を増減するカウンター アプリケーションの簡単な例を作成します。ただし、このカウンターの状態を管理するには Vuex を使用します。まず、プロジェクトの src フォルダーの下に新しい store.js ファイルを作成します。こちらはVuexストアです。

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    actions: {
        increment({commit}) {
            commit('increment');
        },
        decrement({commit}) {
            commit('decrement');
        }
    },
    getters: {
        getCount(state) {
            return state.count;
        }
    }
});

export default store;

上記のコードでは、まず Vuex と Vue をインポートしました。次に、Vue.use() メソッドを使用して Vuex をインストールしました。現在のカウンター値を保存する単純な状態オブジェクトを定義します。また、現在のカウンター値を増減するために使用される 2 つの突然変異も定義します。 2 つのアクションを定義します。1 つは増加操作を実行するため、もう 1 つは減少操作を実行するためです。最後に、現在のカウンター値を取得するゲッターを定義します。

次に、変更をコミットし、vuex を使用して App.vue に保存します:

<template>
  <div id="app">
    <h3>{{ count }}</h3>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import store from './store';

export default {
  name: 'app',
  store,
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>

このファイルで、Vuex ストア モジュールをインポートします。 Vue インスタンスでは、アプリケーション全体で Vuex 状態を使用できるように、ストア オブジェクトを混合します。次に、現在のカウンター値を取得するための計算プロパティを定義します。また、現在のカウンター値をインクリメントおよびデクリメントするための 2 つのメソッドも定義します。これらのアクションを個別に呼び出すにはディスパッチ メソッドを使用します。

最後に、アプリケーションからストア内の状態にアクセスできるように、ストアを vue インスタンスに渡します。これで、ブラウザを開いてアプリケーションにアクセスすると、単純なカウンターが表示され、ボタンをクリックすると、現在のカウンター値が増加または減少します。

概要

Vuex は、データと状態の共有を容易にする Vue.js アプリケーションの状態管理パターンおよびライブラリです。 State、Getter、Mutation、Action は Vuex の中心的な概念であり、深く習得することで、開発者は Vuex での状態変化をより柔軟に処理できるようになります。これに基づいて、Vuex の使用方法を示すタイマー サンプル プログラムを構築しました。 Vuex についてさらに詳しく学びたい場合は、公式ドキュメントを確認してください。

以上がVuex を使用して Vue でグローバル状態を管理する詳細な説明と例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。