ホームページ > 記事 > ウェブフロントエンド > 状態管理とは何ですか? Vuex を状態管理に使用する方法について話しましょう
状態管理とは何ですか?次の記事では、Vuex の状態管理について説明し、状態管理に Vuex を使用する方法について説明します。
開発中、アプリケーションはさまざまなデータを処理する必要があり、これらのデータは一時的に保存する必要があります。アプリケーション内の特定の場所でのこれらのデータの管理は、状態管理と呼ばれます。 (学習ビデオ共有: vue ビデオ チュートリアル )
Vuex の状態管理の基本的な実装 (ここでは公式の図が使用されています)
の使い方1. vuex
npm install vuex
2. 基本的な使い方:
Store は本質的にコンテナです --> ほとんどのアプリケーションの状態を保存します。
Vuex の状態ストレージは応答性が高く、ストア内の状態が変化すると、応答するコンポーネントも更新されます。
// main.js import { createApp } from "vue" import App from "./App.vue" import store from "./store" const app = createApp(App) app.user(store) app.mount("#app")
// src/store/index.js import { createStore } from "vuex" const store = createStore({ state: () => ({ counter: 100 }), mutations: { increment(state) { state.counter++ } } }) export default store
//App.vue <template> <div> <!-- store 中的counter --> <h2>方式一:模板:App当前计数: {{$store.state.counter}}</h2> <h2>方式二:optionsAPI中的computed使用: {{storeCounter}}</h2> <h2>方式三:在compositionAPI中setup函数使用:{{counter}}</h2> <button>+1</button> </div> </template> <script> export default { computed: { storeCounter () { return this.store.state.counter } } } </script> <script> import { toRefs } from 'vue' import { useStore } from 'vuex' const store = useStore() const { counter } = toRefs(store.state) function increment () { store.commit("increment") } </script> <style></style>
これは、各アプリケーションに store インスタンス
が 1 つだけ含まれることを意味します。 利点: ステータス情報に複数のストア インスタンス オブジェクトが含まれる場合、後で維持および管理するのがより困難になります。 単一状態ツリーは、特定の状態のフラグメントを見つけるための最も直接的な方法であるため、
#? ゲッターの基本的な使用法
3 . getters の return 関数 (理解)
#getter の関数自体は関数を返すことができ、それが使用される場所でこの関数を呼び出すことと同じです
4.mapGetters の補助機能
##vuex でストアの状態を変更する唯一の方法は、ミューテーションを送信することです#注: ミューテーションは pinia でキャンセルされます。これについては後で説明します。 vue3 を使用したコンポジション API は vuex よりも優れているため、オプション API のデモは次のとおりです
1. ミューテーションデータの伝達
#ミューテーションを送信するときにデータを伝達することがよくありますが、このときは次のように使用できます
つまり、非同期関数 (ネットワーク リクエストの送信など) は許可されません
アクションは状態を直接変更するのではなく、ミューテーションを送信します。
単一の状態ツリーを使用するため、アプリケーションのすべての状態が比較的大きなオブジェクトに集中されます。非常に複雑になると、ストア オブジェクトが非常に肥大化する可能性があります。したがって、Vuex を使用すると、ストアをモジュールに分割できます。
各モジュールには、独自の状態、突然変異、アクション、ゲッター、さらにはネストされたサブモジュールがあります
モジュール内の突然変異とゲッターの場合、最初に受け取られるパラメータはモジュールのローカル状態オブジェクトです。
デフォルトでは、モジュール内のアクションとミューテーションは引き続きグローバルに登録されます。名前空間。 したがって、名前付けを繰り返すことはできません
モジュールに高度なカプセル化と再利用性を持たせたい場合は、namespaced: true を追加して、名前空間を持つモジュールにすることができます。登録後、そのすべてのゲッター、アクション、およびミューテーションには、モジュールによって登録されたパスに従って自動的に名前が付けられます。
アクション内のルートの状態を変更するには、次のメソッドがあります:
(学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ)
以上が状態管理とは何ですか? Vuex を状態管理に使用する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。