VUE3 開発入門: Vuex 状態管理の使用

VUE3 は、パフォーマンス、保守性、開発エクスペリエンスが大幅に向上したエキサイティングな新世代の VUE フレームワークです。 VUE3 では、Vuex はアプリケーションの状態をより適切に管理するのに役立つ非常に重要な状態管理ツールです。

この記事では、Vuex ストアの作成方法、コンポーネントでの Vuex の使用方法、Vuex での非同期操作の実行方法、プラグインの使用方法など、VUE3 での Vuex の使用方法を紹介します。

Vuex ストアの作成

まず、Vuex をインストールする必要があります:

npm install vuex@next

次に、Vuex ストアを作成します。Vue3 エントリ ファイル (メイン ファイルなど) に作成できます。 .js) 次のコードを追加します。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

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

ここでは、createApp を使用して VUE インスタンスを作成し、store プラグインを使用して Vuex ストアを追加します。アプリケーション。次に、ストア フォルダーを作成し、その中にindex.js ファイルを作成する必要があります。

import { createStore } from 'vuex'

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

export default store

ここでは、まず createStore 関数を使用して Vuex ストアを作成し、初期状態を指定します。 カウント: 0。次に、increment という名前の突然変異を定義します。これは、state をパラメータとして受け取り、state.count を 1 ずつ増分します。最後に、アプリケーションで使用するためにストアをエクスポートします。

コンポーネントでの Vuex の使用

Vuex ストアを作成したので、それをコンポーネントで使用します。 Counter コンポーネントで count と incrementmutation を使用します。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

ここでは、まず計算プロパティ count を使用して store.state.count の現在の値を取得し、次にボタンをクリック イベントを追加します。 incrementmutation を呼び出しています。

これで、アプリケーションで Counter コンポーネントを使用できるようになり、自動的に Vuex ストアに接続されます。

非同期操作

Vuex ストアで HTTP リクエストの送信などの非同期操作を実行する必要がある場合があります。この場合、コード例の actions オプションを使用できます。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      todos: []
    }
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await fetch('/api/todos')
      const todos = await response.json()
      commit('setTodos', todos)
    }
  }
})

export default store

ここでは、まず setTodos という名前のミューテーションを定義し、受信した todos パラメーターを state.todos に設定します。次に、actions オプションを使用して fetchTodos というアクションを定義します。これにより、Todo データをフェッチする非同期操作がトリガーされ、完了時に commit が呼び出されます。トリガー setTodosミューテーション。

プラグインの使用

プラグインを使用して、Vuex ストアの機能を拡張できます。たとえば、vuex-persistedstate プラグインを使用して Vuex ストアを永続化し、ページが更新されるたびにストアの状態がリセットされないようにすることができます。

まず、プラグインをインストールする必要があります:

npm install vuex-persistedstate

次に、プラグインをストアに追加できます:

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  // ...
  plugins: [createPersistedState()]
})

export default store

ここでは、vuex- から始めます。 persistedstatecreatePersistedState 関数をインポートし、プラグインとしてストアに追加しました。

概要

この記事では、VUE3 で Vuex 状態管理を使用する方法を学びました。 Vuex ストアの作成方法、コンポーネントでの Vuex の使用方法、Vuex で非同期操作を実行する方法、プラグインを使用して Vuex の機能を拡張する方法を学びました。

Vuex を使用すると、アプリケーションの状態をより適切に管理し、アプリケーションをより保守しやすくし、将来の拡張のためのより良い基盤を提供することができます。

以上がVUE3 開発入門: Vuex 状態管理の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。