Vue 3 でステート マネージャー Vuex 4 を使用してグローバル データ共有を実現する方法の詳細な説明

Vue 3 は、ユーザー インターフェイスの構築によく使用される人気の JavaScript フレームワークです。状態マネージャー Vuex と簡単に組み合わせて、グローバル データを共有できます。この記事では、開発者がこの強力な状態管理ツールをよりよく理解し、適用できるように、Vue 3 の新しいバージョンである Vuex 4 の使用法について詳しく説明します。

まず、Vuex 4 をインストールする必要があります。 Vue 3 プロジェクトでは、npm または Yarn コマンドを使用して、Vuex の最新バージョンをインストールできます。

npm install vuex@next

または

yarn add vuex@next

インストールが完了したら、Vue 3 のエントリ ファイルに Vuex モジュールをインポートし、createApp 関数を使用して Vue アプリケーション インスタンスを作成します。

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 这里定义Vuex的状态和操作
})

const app = createApp(App)
app.use(store)
app.mount('#app')

上記のコードでは、createStore 関数を使用して Vuex ストア インスタンスを作成し、それをプラグインとして使用して、アプリケーション全体の状態管理に Vuex を使用します。

次に、Vuex 4 の 2 つの最も重要な概念である状態と操作 (突然変異) を理解しましょう。

State はアプリケーション内のデータ ソースであり、どのコンポーネントからもアクセスできます。オペレーションは状態を変更するために使用されるメソッドであり、状態を同期的に変更します。 Vuex 4 では、状態と操作は純粋な関数を使用して定義されます。

たとえば、Vuex で counter 状態と increment 操作を定義できます。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

上記のコードでは、初期状態 counter が 0 であることを定義し、 state.counter に渡すことができる increment という名前の操作を定義します。 カウンター値をインクリメントします。

コンポーネントで Vuex の状態と操作を使用するのは非常に簡単です。状態と操作には、$store オブジェクトを通じてアクセスできます。

export default {
  methods: {
    incrementCounter() {
      this.$store.commit('increment')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}

上記のコードでは、commit メソッドを通じて increment 操作をトリガーし、state メソッドを使用して ## を取得します。 #counterステータスの現在値。

Vuex 4 では、状態と操作に加えて、アクションとゲッターという新機能も導入されています。

アクションは、状態を非同期的に操作する関数です。 Vuex 4 では、

actions 属性を通じてアクションを定義できます。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

上記のコードでは、

asyncIncrement という名前のアクションを定義します。これは、setTimeout 関数を通じて非同期操作をシミュレートし、1 秒後にトリガーしますincrement## ＃手術。 Getter は、ステータスを取得するために使用される計算プロパティです。 Vuex 4 では、ゲッターは

getter

属性を通じて定義できます。 <pre class='brush:javascript;toolbar:false;'>const store = createStore({ state() { return { counter: 0 } }, mutations: { increment(state) { state.counter++ } }, getters: { doubleCounter(state) { return state.counter * 2 } } })</pre>上記のコードでは、

doubleCounter

という名前のゲッターを定義し、counter ステータスの 2 倍を返します。 コンポーネントでのアクションとゲッターの使用は、操作と状態の使用に似ています。アクションは

$store.dispatch

メソッドを通じてトリガーでき、ゲッター値は $store.getters プロパティを通じて取得できます。 <pre class='brush:javascript;toolbar:false;'>export default { methods: { asyncIncrement() { this.$store.dispatch('asyncIncrement') } }, computed: { counter() { return this.$store.state.counter }, doubleCounter() { return this.$store.getters.doubleCounter } } }</pre>上記のコードでは、

this.$store.dispatch

メソッドを通じて asyncIncrement アクションをトリガーし、this.$store を渡します。 getters.doubleCounter を使用して、doubleCounter の値を取得します。 要約すると、Vuex 4 は、Vue 3 アプリケーションでのグローバル データ共有を管理する便利な方法を提供します。状態、操作、アクション、ゲッターを定義することで、データを簡単に共有および管理できます。この記事が Vuex 4 の使用法と原理をより深く理解するのに役立つことを願っています。

以上がVue 3 でステート マネージャー Vuex 4 を使用してグローバル データ共有を実現する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。