背景: 需要開発プロセス中に、一部のインターフェースは、ページに表示する必要がある多くのフィールドを含む結果を返します。通常、これらのフィールドは、.vue ファイル内の計算プロパティとしてカプセル化するか、対応するフィールドをデータ内のフィールドに再割り当てして、使いやすさを実現できます。次のように: 計算された(){ カウント1(){ this.targetObj.count1 を返す }, カウント2(){ this.targetObj.count2 を返す }, // ... // これを想像してください。同様のコードを5回または10回書く必要があります} しかし、どちらの方法を使用したとしても、コードの冗長性が大幅に増加し、非常に不便になります。この問題を解決するために、この記事では、冗長なコードを大幅に削減し、データ取得時に統一されたフォールトトレラント処理を実行できる 1. マップ方式vuex の基本的な状態抽出方法は、次のように使用できます。 計算された(){ カウント(){ これを返します。$store.count } } 同時に、 var mapState = normalizeNamespace(関数 (名前空間、状態) { // 指定された属性を保存および取得するオブジェクトを定義します。var res = {}; normalizeMap(states).forEach(function (ref) { var キー = ref.key; var val = ref.val; // 指定されたオブジェクトの指定された属性を取得するメソッドを定義します res[key] = function mapsedState () { var state = this.$store.state; var getters = this.$store.getters; // 名前空間に従って指定されたストアモジュールオブジェクトを検索します if (namespace) { var module = getModuleByNamespace(this.$store, 'mapState', 名前空間); if (!モジュール) { 戻る } 状態 = module.context.state; ゲッター = module.context.getters; } // 名前空間を指定して取得したストアモジュールのプロパティを取得します。戻り値の typeof val === 'function' val.call(this, state, getters) : 状態[値] }; }); // 関数オブジェクトを返す return res }); 2. 応用この考え方に従うと、複雑なオブジェクト内のフィールドを取得する方法を最適化できます。ファクトリー関数は次のように定義されます エクスポート const mapTargetValue = (nameSpace, keyList = [])=>{ 定数結果 = {} // 注意: 返されるメソッドに矢印関数を使用しないでください。そうしないと、このメソッドを取得できなくなります。 // ここでは 2 つの形式の keyList が互換性があります。mapState の属性名変更の使用形式を参照してください。if(Array.isArray(keyList)){ keyList.forEach( キー => 結果[キー] = 関数(){ // ここでは、名前空間オブジェクトを this で直接取得できると仮定します // もちろん、指定されたオブジェクトを取得する複雑さは、コード ロジックによって異なります。 return this[nameSpace][key] || 0 }) }それ以外の場合(keyListのtype=== 'object' && keyList){ for(let key in keyList){ result[keyList[key]] = function(){ return this[nameSpace][key] || 0} } } 結果を返す } このメソッドの使用方法は 計算: { ...mapTargetValue("targetObj", ["count1", "count2"]), ...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}), } これで、vuex での mapState のアイデアの適用に関するこの記事は終わりです。より関連性の高い vuex mapState コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTMLシールドの右クリックメニューと左クリック入力機能の例
>>: Dockerでudpポート番号を指定する問題を解決する
はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...
説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...
目次序文標準的なSFCの書き方スクリプト設定可変露出部品の取り付け小道具カスタムイベント要約する序文...
html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバ...
1.コンテナ内の /etc/hosts、/etc/resolv.conf、/etc/hostname...
目次0. 背景1. インストール2. Baidu Cloudアカウントにログインする3. ファイルを...
Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...
1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...
Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な Jav...
Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...
この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...
まず、setIntervalはフックとしてカプセル化されます👇 'react' から...
概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...
Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...
Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....