Vuexの特性と機能の詳細な説明

Vuex とは何ですか?

VueX は、Vue.js アプリケーション専用に設計された状態管理フレームワークであり、さまざまな vue コンポーネント (vue コンポーネント内のデータとして理解できます) の変更可能な状態を統一的に管理および維持します。

Vuex は開発モードまたはフレームワークとして理解できます。たとえば、PHP には thinkphp、Java には spring などがあります。

状態 (データソース) を通じてドライバーコンポーネントの変更を集中管理します (Spring の IOC コンテナーが Bean を集中管理するのと同じように)。

Vuex にはstate, getters 、 mutations 、 actions 、 modulesという 5 つのコア概念があります。

アプリケーションレベルの状態はストアに集中管理されます。状態を変更するには、同期的な変更を送信します。非同期ロジックはアクションにカプセル化する必要があります。

Cuex は Flux、Redux、Elm Architecture を活用しています。他のモードとは異なり、Vuex は、Vue.js のきめ細かいデータ応答メカニズムを利用して効率的な状態更新を行うために、Vue.js 専用に設計された状態管理ライブラリです。

状態管理: 簡単に言えば、各 vue コンポーネントの変更可能な状態を統一的に管理および維持することです (vue コンポーネント内のいくつかのデータとして理解できます)

Vuexの5つの特性

state : すべてのアプリケーションレベルの状態を 1 つのオブジェクトに含む単一の状態ツリー。
getters : 計算プロパティと同様に、ゲッターの戻り値は依存関係に基づいてキャッシュされ、依存関係が変更された場合にのみ再計算されます。
mutations : 各変異には、文字列イベントタイプ (type) とコールバック関数 (handler) があります。
action : アクションはミューテーションに似ていますが、違いは、アクションは状態を直接変更するのではなく、ミューテーションを送信することです。アクションには、任意の非同期操作を含めることができます。
modules : モジュラー vuex。各モジュールには独自の状態、ミューテーション、アクション、ゲッター、さらにはネストされたサブモジュールがあります。

vuex の State プロパティとは何ですか?

1. Vuex は多くのオブジェクトを含む倉庫です。状態は、一般的な Vue オブジェクトのデータに対応するデータソースが格納される場所です。

2. 状態に保存されたデータはレスポンシブです。Vue コンポーネントはストアからデータを読み取ります。ストア内のデータが変更されると、このデータに依存するコンポーネントも更新されます。

3. mapState を通じて、グローバル状態とゲッターを現在のコンポーネントの計算されたプロパティにマップします。

vuex の Getter 機能とは何ですか?

1. ゲッターは、Storeの計算プロパティであるStateに対して計算を実行できます。

2. コンポーネント内でプロパティを計算することもできますが、ゲッターは複数のコンポーネント間で再利用できます。

3. 状態が 1 つのコンポーネントでのみ使用される場合、ゲッターは必要ありません。

vuex の mauation 機能とは何ですか?

1. ミューテーションは、状態を直接更新する複数のメソッド (コールバック関数) を含むオブジェクトです。

2. 同期コードのみを記述でき、非同期コードは記述できない

vuex のアクション機能とは何ですか?

1. アクションは突然変異に似ていますが、違いは次のとおりです。

2. アクションは状態を直接変更するのではなく、ミューテーションを送信します。

3. アクションには任意の非同期操作を含めることができます

Vuex はいつ使用すればよいですか?

Vuex は共有状態の管理に役立ちますが、より多くの概念とフレームワークも備えています。これには、短期的利益と長期的利益を比較検討する必要があります。

大規模なシングルページアプリケーションを開発する予定がない場合、Vuex の使用は面倒で冗長になる可能性があります。確かに、アプリが十分にシンプルな場合は、Vuex を使用しない方がよいでしょう。必要なのはシンプルなグローバルイベントバスだけです。ただし、中規模から大規模のシングルページアプリケーションを構築する必要がある場合は、コンポーネント外部の状態をより適切に管理する方法を検討する可能性が高く、Vuex が自然な選択になります。