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

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

PHPz

リリース： 2023-06-09 16:08:27

オリジナル

1479 人が閲覧しました

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 サイトの他の関連記事を参照してください。