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

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

WBOY

リリース： 2023-06-15 21:54:40

オリジナル

2003 人が閲覧しました

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 倍を取得できます。