VUE3 入門チュートリアル: Vuex 状態管理を使用したグローバル データ管理の実装

Vue.js の継続的な開発に伴い、Vue 3 も正式にリリースされ、徐々に広く使用されるようになりました。Vue 2 と比較して、Vue 3 には、データの傍受やハイジャックを実現するために Proxy オブジェクトを介してデータをプロキシするなど、多くの最適化が施されています。 . .ただし、実際のアプリケーションでは、大規模なアプリケーション プロジェクトには多くのコンポーネントが含まれることが多いため、グローバル状態の管理がますます重要になります。現時点では、Vuex は非常に優れたソリューションです。

1. Vuex の概要

Vuex は、Vue.js の公式状態管理ライブラリであり、Vue アプリケーションの複数のコンポーネント間で状態 (データ) を共有する問題を解決するように設計されています。その中心となる概念は次のとおりです。

• State (状態): アプリケーション内でグローバルに管理する必要があるデータ。
• ゲッター (値取得者): 状態から何らかの状態を導出するために使用されます (コンポーネントの計算されたプロパティと同様)。
• Mutation (ミューテーション): ステート内のデータを変更するために使用されます。ミューテーションでは Vuex データが同期的に更新されるため、データの一貫性が保証されます。
• アクション (アクション): ミューテーションと同様に、状態内のデータを変更するためにも使用されますが、非同期で動作することができ、ネットワーク リクエストなどの非同期操作を開始するために使用できます。

Vuex は、これらの中心概念を柔軟に使用することで、グローバルなデータ管理の実現を支援し、それによってコンポーネント間の転送と操作を簡素化します。

2. Vuex ストアの作成

Vuex のデータはストア オブジェクトに保存されるため、最初にストア オブジェクトを作成する必要があります。 Vue 3 では、ストア オブジェクトを作成する方法が Vue 2 とは少し異なります。

import { createStore } from 'vuex'; // 导入createStore方法

const store = createStore({
  state() {
    // 定义state对象
    return {
      count: 0
    }
  },
  mutations: {
    // 定义mutation方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 定义action方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义getter方法
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store; // 导出store对象

上記のコードでは、createStore メソッドを使用してストア オブジェクトを作成し、オブジェクトに渡しました。このオブジェクトには、state、mutations、action、getter の 4 つの属性が含まれています。このうち、state 属性はグローバル状態カウントの初期値を 0 として定義し、mutations 属性はカウント値を 1 ずつ増やす関数を実装する mutation メソッド increment を定義し、actions 属性はアクション メソッド incrementAsync を定義し、これはカウント値の非同期増分。1 の関数。getter 属性は、カウント値の 2 倍を返す getter メソッド doubleCount を定義します。

3. コンポーネントで Vuex を使用する

ストア オブジェクトを作成した後、コンポーネントでデータとメソッドを直接使用できます。 Vue 3 では、<script setup> の構文を使用して、Vuex でデータとメソッドを使用できます。

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function handleClick() {
  store.commit('increment');
}

</script>

<template>
  <div>
    <p>count: {{store.state.count}}</p>
    <p>double count: {{store.getters.doubleCount}}</p>
    <button @click="handleClick">increment</button>
  </div>
</template>

上記のコードでは、useStore 関数を通じてストア オブジェクトを取得し、handleClick メソッドの increment メソッドを呼び出してカウント値を変更します。テンプレートでは、store.state.count を通じてカウント値を取得し、store.getters.doubleCount を通じてカウント値の 2 倍を取得できます。

4. 概要

この記事の導入部を通じて、Vuex の基本概念と使用法を理解できます。実際の開発において、アプリケーションが大量のグローバル データを管理する必要がある場合は、コンポーネント間の対話を大幅に簡素化し、開発効率を向上させることができる Vuex を使用するのが良い選択です。

以上がVUE3 入門チュートリアル: Vuex 状態管理を使用したグローバル データ管理の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。