vuex の使用シナリオと属性は何ですか?

vuex の使用シナリオ: 1. ユーザーの個人情報管理モジュール; 2. e コマース プロジェクトのショッピング カート モジュール; 3. 私の注文モジュール; 4. 注文決済ページ。 vuex 属性は次のとおりです: 1. 変数の保存に使用される状態、2. ゲッター、3. 突然変異、4. アクション、5. モジュール。

#このチュートリアルの動作環境: Windows7 システム、vue2.9.6&&vuex4.0.2 バージョン、DELL G3 コンピューター。

vuex とは何ですか?

vuex は、コンポーネント間の通信を管理するために使用されるプラグインです。[vue.js] アプリケーション用に特別に開発された状態管理モデルです。コンポーネント間で同じ状態を共有する問題を解決します。問題は、コンポーネントの外部で状態をより適切に管理できることです。

vuex が必要な理由は何ですか?

複数のコンポーネントが同じ状態に依存する場合、複数層のコンポーネント間の入れ子によりパラメータの受け渡し方法がより複雑になります。イベントを通じて、変化および同期された状態のポリフェノールのコピーにより、パターンが脆弱になり、コードが保守不能になります。

いつ、どのような状況で vuex を使用する必要がありますか?

中規模から大規模の単一ページ アプリケーションを構築する場合は、コンポーネントの外部で状態をより適切に管理する方法を検討する必要があります。

注: 大規模な単一ページのアプリケーションを開発していない場合、vuex の使用は面倒で冗長になる可能性があります。つまり、すぐに開発できるプロジェクトが、vuex を使用すると複雑になってしまう可能性があります。一般に、単純なストア モードで十分です。

vuex

state、getter、mutations、action、module の 5 つの主要な属性。

1. state: vuex の基本データ、変数の格納に使用されます

2. geeter: 基本データ (state) から派生したデータ、state の計算された属性に相当します

3. 突然変異: 更新されたデータを送信するメソッドは同期的である必要があります (アクションを非同期的に使用する必要がある場合)。各ミューテーションには、文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。

コールバック関数は実際に状態を変更する場所であり、最初のパラメータとして状態を受け入れ、2 番目のパラメータとしてペイロードを送信します。

4. アクション: 機能はミューテーションとほぼ同じですが、違いは ==》1. アクションは状態を直接変更するのではなく、ミューテーションを送信します。 2. アクションには、任意の非同期操作を含めることができます。

5. モジュール: モジュール型 vuex を使用すると、各モジュールが独自の状態、ミューテーション、アクション、ゲッターを持つことができるため、構造が非常に明確になり、管理が容易になります。

Vuex の使用シナリオ:

• ユーザーの個人情報管理モジュール;

• 電子商取引プロジェクトのショッピング カート モジュールは、毎回ショッピング カートの数量を取得するインターフェイスを呼び出します (前提条件)。効果は得られますが、HTTP リクエストのたびにブラウザのパフォーマンスが消費されます。対照的に、トリガーに vuex ミューテーションを使用する方が有利です;

• 注文モジュールと注文リストで、[注文をキャンセル] をクリックし、対応する注文リストを更新します。この場合も Vuex を使用します。 、state 状態を保存し、この状態を監視し、変化したときに対応するリストを更新します;

• 注文決済ページからクーポン選択ページに入り、クーポンページを選択します。選択したクーポン情報を保存するにはどうすればよいですか?状態はクーポン情報を保存します。クーポンを選択すると、変更が送信されます。注文決済ページで、選択されたクーポンが取得され、注文の割引情報が更新されます。

関連する推奨事項: 「

vue.js チュートリアル >>

以上がvuex の使用シナリオと属性は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。