VueのVuexの4つの補助機能について

VueのVuexの4つの補助機能について

1. 補助機能

コンポーネントが複数の状態を取得する必要がある場合、これらすべての状態を計算プロパティとして宣言すると、多少の繰り返しと冗長性が生じます。この問題を解決するには、計算されたプロパティを生成するmapStateヘルパー関数を使用して、キー入力を節約します。

スクリプトに補助関数を導入します。

'vuex' から { mapState、mapMutations、mapActions、mapGetters } をインポートします。

2. 例

1. mapState と mapGetters

stategettersプロパティ、つまり特定の値を返すため、 mapStatemapGetters計算プロパティcomputedに配置する必要があります。

例えば:

これで、ストアの状態にプロパティ userName が存在します。

Home.vue コンポーネントでは、mapState を通じて取得され、インターフェースに表示されます。

計算されたコード:

  計算:{
    //補助関数を通じてストア内の状態を取得する
    ...mapState(['ユーザー名'])
    //同等: 次の通常の計算プロパティコード /* userName (){
      this.$store.state.userName を返します
    }*/
  }

ページの呼び出し:

結果:

このように、単純な...mapState(['userName'])を使用して、比較的長い計算プロパティ関数を置き換えることができます。
mapGettersの使い方はmapStateと同じです。computed computed呼び出すことができます。ここではmapStateのみを例として取り上げます。

2. mapMutations と mapActions

mutationsactions関数を返すため、コンポーネントの methods プロパティに配置する必要があります。

例えば:

現在、 storemutationsには、現在のユーザーにウェルカム ウィンドウをポップアップ表示するヒント機能があります。

上の図のmethods内のコードは、ストア内のミューテーションを取得するためのショートカットです。

  方法:{
    // ストア内のミューテーションを取得するための略語
    ...mapMutations(['tip'])
    ///* tip(){ と同等
      this.$store.commit('tip');
    }*/
  }

コンポーネントの呼び出し: created関数内の tip メソッドを呼び出して、ウェルカム ポップアップ ウィンドウを実装します。

mapActionsmapMutationsの使用方法は同じです。つまり、これらはnethodsで宣言できるため、ストア内のアクションとミューテーションの参照が簡単になります。

上記の例からわかるように、補助関数の利点は、ストア内の状態、ゲッター、ミューテーション、アクションの取得を簡素化できることです。もちろん、補助機能を使用しなくても上記の機能を実現できますが、コンポーネント内で複数の状態を同時に使用する必要がある場合は、補助機能を使用すると便利になります。

以上で、VueのVuexの4つの補助機能についての記事は終了です。Vuexの補助機能に関するより詳しい内容は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  MySQL データベース内の varchar 型の数値のサイズを比較する方法

>>:  Linux環境でログファイルを表示するコマンドの詳細な説明

推薦する

MySql の知識ポイント: トランザクション、インデックス、ロックの原則、使用状況の分析

この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...

Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...

丸い角や鋭い角を表現するために、絵の代わりに文字を使用する研究

Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリ...

自動ロック画面機能を実現するjs

1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...

VueはPCカメラを呼び出して写真機能を実現します

この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...

Dockerの急速な拡張の高度な方法

1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...

MySQL クエリ フィールド タイプが json の場合の 2 つのクエリ メソッド

テーブル構造は次のとおりです。 id varchar(32) 情報JSONデータ: id = 1 i...

64 ビット CentOs7 ソース コードのインストール mysql-5.6.35 プロセス共有

インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [root...

MySQL Installer Community 5.7.16 インストール詳細チュートリアル

この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...

Linux での chmod コマンドの使用方法の詳細な説明

chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...

プロジェクトの再構築からプロジェクトにおける CSS3 カスタム変数の使用について話す

CSS3変数について変数を宣言するときは、変数名の前に 2 つのハイフン ( -- ) を追加します...

CSS カウンターとコンテンツの概要

コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

Windows10でのMySQL 5.7.21のインストールと設定のチュートリアル

この記事では、MySQL 5.7.21 のインストールと設定方法を記録し、皆様と共有します。 1. ...

NodeJSプロセスがどのように終了するかについて詳しく説明します

目次序文積極的な撤退例外、拒否、および発行されたエラー信号まとめ序文NodeJS プロセスが終了する...