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環境でログファイルを表示するコマンドの詳細な説明

推薦する

VMware Workstation Pro が Win10 アップデートにより開けなくなる問題の解決方法

今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...

CSSはコンテンツの高さが足りない場合にフッターを自動的に下部に固定します

UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...

JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...

CSS セレクターの重みの理解(個人テスト)

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...

Vuex はシンプルなショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

データベースのインデックス作成に関する知識ポイントのまとめ。必要な情報はすべてここにあります。

データベースインデックスについては皆さんもよくご存知だと思います。 インデックスは、データベース テ...

Mysql インデックスと Redis ジャンプテーブルについての簡単な説明

まとめインタビュー中、MySQL インデックスの問題について議論しているときに、B+ ツリー、B ツ...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

Mysql で期間の交差をクエリする方法

MySQLクエリ期間の交差使用シナリオデータベース テーブルには、starttime と endti...

Linux に nginx をインストールする方法

Nginx は C 言語で開発されており、Linux で実行することをお勧めします。もちろん、Win...

git bash を使用して Linux にログインするための ssh の設定方法

1. まず、Linux サーバー上で公開鍵ファイルと秘密鍵ファイルを生成します。デフォルトの保存ディ...

Dockerコンテナの自動終了を停止する方法の詳細な説明

この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...

両側にCSS固定レイアウト、中央に適応レイアウトを実装

フローティング、フローティング埋め込み div、配置、フレックスという 4 つの一般的な方法と原則を...

CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。

Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...