1. 補助機能コンポーネントが複数の状態を取得する必要がある場合、これらすべての状態を計算プロパティとして宣言すると、多少の繰り返しと冗長性が生じます。この問題を解決するには、計算されたプロパティを生成する スクリプトに補助関数を導入します。 'vuex' から { mapState、mapMutations、mapActions、mapGetters } をインポートします。 2. 例1. mapState と mapGetters 例えば: これで、ストアの状態にプロパティ userName が存在します。 Home.vue コンポーネントでは、mapState を通じて取得され、インターフェースに表示されます。 計算されたコード: 計算:{ //補助関数を通じてストア内の状態を取得する ...mapState(['ユーザー名']) //同等: 次の通常の計算プロパティコード /* userName (){ this.$store.state.userName を返します }*/ } ページの呼び出し: 結果: このように、単純な 2. mapMutations と mapActions 例えば: 現在、 上の図の 方法:{ // ストア内のミューテーションを取得するための略語 ...mapMutations(['tip']) ///* tip(){ と同等 this.$store.commit('tip'); }*/ } コンポーネントの呼び出し: 上記の例からわかるように、補助関数の利点は、ストア内の状態、ゲッター、ミューテーション、アクションの取得を簡素化できることです。もちろん、補助機能を使用しなくても上記の機能を実現できますが、コンポーネント内で複数の状態を同時に使用する必要がある場合は、補助機能を使用すると便利になります。 以上で、VueのVuexの4つの補助機能についての記事は終了です。Vuexの補助機能に関するより詳しい内容は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
<<: MySQL データベース内の varchar 型の数値のサイズを比較する方法
>>: Linux環境でログファイルを表示するコマンドの詳細な説明
この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...
2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...
Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリ...
1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...
この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...
1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...
テーブル構造は次のとおりです。 id varchar(32) 情報JSONデータ: id = 1 i...
インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [root...
この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...
chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...
CSS3変数について変数を宣言するときは、変数名の前に 2 つのハイフン ( -- ) を追加します...
コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...
問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...
この記事では、MySQL 5.7.21 のインストールと設定方法を記録し、皆様と共有します。 1. ...
目次序文積極的な撤退例外、拒否、および発行されたエラー信号まとめ序文NodeJS プロセスが終了する...