1. Vuexは何をしますか？
公式説明：Vuexは、Vue.jsアプリケーション用に特別に開発された状態管理モードです。一元化されたストレージ管理を使用します
- アプリケーションのすべてのコンポーネントの状態、および対応するルールにより、状態が予測可能な方法で変化することが保証されます。
- Vuexは、Vueの公式デバッグツールdevtools拡張機能にも統合されており、ゼロ構成のタイムトラベルデバッグ、状態スナップショットのインポートとエクスポートなどの高度なデバッグ機能を提供します。
状態管理とは正確には何ですか？
- 状態管理モードと集中型ストレージ管理という用語は、非常に背が高く、予測できないように聞こえます。
実際、複数のコンポーネントで共有する必要のあるすべての変数を1つのオブジェクトに格納することと単純に考えることができます。 - 次に、このオブジェクトを最上位のVueインスタンスに配置して、他のコンポーネントが使用できるようにします。
では、複数のコンポーネントがこのオブジェクトのすべての変数プロパティを共有できますか？
- もしそうなら、なぜ公式は特別なプラグインVuexをリリースするのですか？オブジェクトをカプセル化して自分で管理することはできませんか？
- もちろん、VueJSがもたらす最大の利便性について考える必要がありますか？はい、応答性があります。
- オブジェクトを自分でカプセル化して実装する場合、オブジェクト内のすべてのプロパティが応答することを保証できますか？もちろんできますが、自分でカプセル化するのは少し面倒かもしれません。
- 言うまでもなく、Vuexは、複数のコンポーネント間で状態を共有するようなプラグインを提供するだけであり、それを使用するだけです。
第二に、それはどのような状態で管理されていますか？
しかし、複数のコンポーネント間でどのような状態を共有する必要がありますか？
- 大規模なオープニングを行った場合は、複数のステータスに遭遇し、複数のインターフェイス間で問題を共有している必要があります。
- たとえば、ユーザーのログインステータス、ユーザー名、アバター、地理的位置情報などです。
- たとえば、商品のコレクション、ショッピングカート内のアイテムなどです。
- これらのステータス情報は、すべて統一された場所に配置して保存および管理できますが、応答性は維持されます（後でコードを確認できますが、心配する必要はありません）。
さて、理論的に状態管理を理解した後、実際のコードから状態管理を見てみましょう。
結局のところ、トークは安いです、コードを見せてください（Linusから）
まず、インターフェースの状態管理を見てみましょう。
3つの単一インターフェイスステータス管理
単一のコンポーネントでの状態管理は非常に単純なことです
が、それはどういう意味ですか？下の写真を見てみましょう。
この写真の3つのことをどのように理解しますか？
- 州：言うまでもなく、それは私たちの州です。（当面はデータの属性として扱うことができます）
- ビュー：ビューレイヤー。状態の変化に応じてさまざまな情報を表示できます。（これは理解しやすいですか？）
- アクション：ここでのアクションは、主にユーザーのさまざまなアクション（クリック、入力など）であり、状態が変化します。
理解を深めるためにいくつかのコードを書いてください。
右側のコード効果を見てください。確かにそれは達成されますよね？
この場合、管理する状態がありますか？そうです、それはただのカウンターの数です。
- カウンターは何らかの方法で記録する必要があります。それが私たちの州です。
- カウンターの現在の値は、ビュー部分であるインターフェースに表示する必要があります。
- インターフェイスで特定の操作が発生した場合（ユーザーのここをクリックまたはユーザーの入力）、ステータスを更新する必要があります。これがアクションです。
- これは上のフローチャートではありませんか？
4.マルチインターフェースステータス管理
Vueは、単一のインターフェースの状態を管理するのに役立ちましたが、複数のインターフェースについてはどうでしょうか？
- 複数のビューが同じ状態に依存しています（状態が変更され、複数のインターフェイスを更新する必要があります）
- 異なるインターフェースのアクションが同じ状態を変更したい（Home.vueを変更する必要があり、Profile.vueもこの状態を変更する必要があります）
つまり、一部の状態（state1 / state2 / state3）では、ビューの1つにのみ属しますが、一緒に維持するための複数の試行に属する状態（state a / state b / state c）もあります。
- 状態1 /状態2 /状態3自分の部屋に置いて、自分で管理・使用します。問題ありません。
- しかし、州a /州b /州cは、私たちが統一された方法でそれを管理するのを助けるために大きな家政婦に引き渡すことを望んでいます！！！
- そうです、Vuexはこの大きな家政婦のツールを私たちに提供することです。
グローバルシングルトンモード（ビッグバトラー）
- 私たちが今しなければならないことは、共有状態を抽出し、それを統合管理のためにスチュワードに渡すことです。
- その後、私が規定したルールに従って、各ビューにアクセスして変更します。
- これがVuexの背後にある基本的な考え方です。
Vuex状態管理の凡例：
第四に、Vuexの基本的な使用法
前に簡単なケースを実装しましょう
- まず、Vuexコードをどこかに保存する必要があります。
ここでは、最初にフォルダーストアを作成し、その中にindex.jsファイル
を作成します。index.jsファイルに次のコードを記述します。
- Vueインスタンスにマウントします。
次に、すべてのVueコンポーネントがこのストアオブジェクトを使用できるようにし
ます。main.jsファイルに移動し、ストアオブジェクトをインポートして、新しいVueに配置します。
このようにして、他のVueコンポーネントで次のことができます。それを渡しますthis.$store。方法、ストアオブジェクトを取得します
- Vuexのカウントを使用する
さて、これはVuexを使用する最も簡単な方法です。
使用手順について簡単なセクションを作成しましょう。
- 共通のストアオブジェクトを抽出して、複数のコンポーネント間で共有されている状態を保存します
- ストアオブジェクトを新しいVueオブジェクトに配置して、すべてのコンポーネントで使用できるようにします
- 他の構成要素の状態に格納された利用ストアオブジェクト
によりthis.$store.state.属性アクセス状態の方法
によってthis.$store.commit('mutation中方法')状態を変更します
予防：
- 直接変更するのではなく、ミューテーションを送信し
store.state.countます。 - これは、Vuexが状態の変化をより明確に追跡できるため
store.state.count、値を直接変更しないでください。
5、Vuexのコアコンセプト
Vuexにはいくつかのコアコンセプトがあります。
- 状態
- ゲッター
- 突然変異
- アクション
- モジュール
を1つずつ紹介します。
5.1状態単一状態ツリー
Vuexは、単一の状態ツリーを使用することを提案しています。単一の状態ツリーとは何ですか。
英語名は信頼できる唯一の情報源であり、単一のデータソースに翻訳することもできます。
しかし、それは何ですか？人生の例を見てみましょう。
OK、私は人生の例を使って簡単な例えをします。
中国では、学校での個人ファイル、仕事後の社会保障記録、積立基金の記録、結婚後の結婚情報、その他の関連する世帯登録、医療、卒業証書など、記録する必要のある情報がたくさんあることを私たちは知っています。不動産記録など（まだたくさんの情報があります）。
この情報は管理のために多くの場所に散らばっています。ある日、特定のビジネス（特定の都市への入国など）を行う必要がある場合、対応する各職場に行ってさまざまな情報を印刷およびスタンプする必要があります。最後にあなたの情報が正しいことを証明する場所に提出してください。
この種の情報保存方式は、非効率であるだけでなく、管理にも不便であり、将来の保守も大きな課題です（もちろん、国は現在、システムを改善しています）。
これは、アプリケーション開発に似てい
ます。状態情報が複数のStoreオブジェクトに保存されている場合、その後の管理と保守は特に困難になります。
そのため、Vuexは単一の状態ツリーを使用してアプリケーションレベルのすべての状態を管理します。
単一の状態ツリーを使用すると、特定の状態のフラグメントを最も直接的な方法で見つけることができます。また、後続の保守およびデバッグプロセスで管理および保守することも非常に便利です。
5.2ゲッターの基本的な使用法
次のストアなど、ストアから状態の変化を取得する必要がある場合があり
ます。年齢が20歳を超える学生の数を取得します。
20歳以上のすべての学生のリストを取得するゲッターがすでにある場合、コードは次のように記述できます。
ストアでゲッターを定義できます。ゲッターは
デフォルトではパラメーターを渡すことができません。パラメーターを渡したい場合は、ゲッター自体に別の関数を返させることしかできません。
5.3ミューテーションステータスの更新
Vuexのストアステータスを更新する唯一の方法：ミューテーションの送信
突然変異には主に2つの部分が含まれます。
- 文字列のイベントタイプ（type）
- コールバック関数（ハンドラー）。コールバック関数の最初のパラメーターはstateです。
突然変異の定義：
突然変異による更新：
5.4ミューテーション受け渡しパラメータ
ミューテーションによってデータを更新する場合、いくつかの追加パラメーターを実行したい可能性があります
- このパラメーターは、ミューテーションのペイロード（Payload）と呼ばれます。
突然変異のコード：
しかし、パラメータが1つでない場合はどうなりますか？
- たとえば、渡すパラメータはたくさんあります。
- このとき、通常はオブジェクトの形で渡します。つまり、ペイロードはオブジェクトです。
- このとき、オブジェクトから関連情報を取得できます。
5.5突然変異の提出スタイル
上記のコミットによる送信は一般的な方法です
。Vueは別のスタイルも提供します。これはtype属性を持つオブジェクトです。Mutation
の処理方法は、コミットオブジェクト全体をペイロードとして使用するため、コードは変更されていません。次のとおりです。
5.6突然変異応答規則
Vuexストアの状態は応答性があります。状態のデータが変更されると、Vueコンポーネントが自動的に更新されます。
これには、Vuexに対応するいくつかのルールに準拠する必要があります。
- 事前にストアで必要な属性を初期化します。
- 状態のオブジェクトに新しいプロパティを追加するときは、次のメソッドを使用します。
方法1：Vue.set（obj、 'newProp'、123）を使用する
方法2：古いオブジェクトを古いオブジェクトに慎重に再割り当てする
5.7突然変異定数タイプ-概念
次の質問について考えてみましょう。
- ミューテーションでは、多くのイベントタイプ（つまり、メソッド名）を定義します。
- 私たちのプロジェクトが成長するにつれて、Vuexはますます多くの状態を管理し、ますます多くの状況を更新する必要があります。つまり、Mutationにはますます多くのメソッドがあります。
- メソッドが多すぎるため、ユーザーはこれらのメソッドを覚えたり、複数のファイルを切り替えたり、メソッド名を確認したりするために多くの経験を費やす必要があります。コピーしていない場合でも、間違いが発生する可能性があります。
上記の問題を回避するにはどうすればよいですか？
- さまざまなFlux実装では、非常に一般的な解決策は、Mutationイベントタイプの代わりに定数を使用することです。
- これらの定数を別のファイルに入れて、管理を容易にし、アプリ全体のすべてのイベントタイプを一目で明確にすることができます。
具体的にどのようにそれを行うのですか？
-
ファイルmutation-types.jsを作成し、その中に定数を定義できます。
-
定数を定義するときは、ES2015のスタイルを使用し、関数の名前として定数を使用できます。
5.8ミューテーション同期機能
通常、Vuexでは、ミューテーションのメソッドは同期メソッドである必要があります。
主な理由は、devtoolsを使用すると、devtoolsがミューテーションのスナップショットをキャプチャするのに役立つためです。
ただし、非同期操作の場合、devtoolsはそうではありません。うまく追跡できるこの操作はいつ完了しますか。たとえば
、前のコードでは、更新が実行されると、次の情報がdevtoolsに
表示されます。図1ただし、Vuexのコードの場合、非同期関数を使用します。 2
追跡できないため、状態の情報データが変更されていないことがわかります。したがって、通常、ミューテーションで非同期操作を実行しないでください。
5.9アクションの基本的な定義
Mutationで非同期操作を実行するべきではないことを強調しますが、場合によっては、非同期である
必要があるネットワーク要求など、Vuexでいくつかの非同期操作を実行する必要があります。今回の対処方法は？
アクションはミューテーションに似ていますが、ミューテーションの代わりに非同期操作を実行するために使用されます。
アクションの基本的な使用コードは次のとおりです。
コンテキストとは何ですか？
- コンテキストは、ストアオブジェクトと同じメソッドとプロパティを持つオブジェクトです。
- つまり、コンテキストを介してコミット関連の操作を実行でき、context.stateなどを取得することもできます。
- ただし、ここでは同じオブジェクトではないことに注意してください。なぜですか。後でモジュールについて学習するときに、より具体的に説明しましょう。
この種のコードは不要ですか？
アクションを定義してからアクションでコミットします。これはパンツやオナラではあり
ませんか？実際にはそうではありません。Vuexに非同期操作がある場合は、アクションで実行できます。アップ。
5.10アクションの配布
Vueコンポーネントでは、アクションでメソッドを呼び出す場合、ディスパッチを使用する必要があります。
同じように、ペイロードの配信もサポートします。
5.11アクションによって返される約束
ES6構文を学んだ前に、Promisesは非同期操作によく使用されると言いました。実際には
、非同期操作をPromiseに入れて、成功または失敗した後、対応する解決または拒否を呼び出すことができます
。OK、次を見てみましょう。コード：
5.12モジュールを理解する
モジュールとはモジュールを意味しますが、なぜVuexでモジュールを使用するのですか？
- Vueは単一の状態ツリーを使用します。つまり、多くの状態がVuexによって管理されます。
- アプリケーションが非常に複雑になると、ストアオブジェクトが非常に肥大化する可能性があります。
- この問題を解決するために、Vuexではストアをモジュールに分割できます。各モジュールには独自の状態、ミューテーション、アクション、ゲッターなどがあります。
モジュール
をどのように編成しますか？以下のコードを見てみましょう：
上記のコードでは、すでに全体的な編成構造があります。特定の部分モジュールでコードを記述する方法を見てみましょう
。moduleA追加状態にあります。、ミューテーション、ゲッター、
ミューテーション、ゲッターは最初のパラメーターを受け取り、ローカル状態オブジェクトです
5.13モジュールでアクションを書く方法
アクションの記述方法？コンテキストパラメータオブジェクトを受け取ります。
ローカル状態はcontext.stateを通じて公開され、ルートノード状態はcontext.rootStateです。
グローバル状態もゲッターで必要な場合は、より多くのパラメータを受け入れることができます。
6.プロジェクトの構造
Vuexが多すぎるコンテンツの管理に役立つ場合、優れたプロジェクト構造によりコードがより明確になります。
