背景: 需要開発プロセス中に、一部のインターフェースは、ページに表示する必要がある多くのフィールドを含む結果を返します。通常、これらのフィールドは、.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ポート番号を指定する問題を解決する
目次索引- 総合索引- ユニークなインデックス- 主キーインデックス- 複合インデックス- 全文索引...
bgcolor="テキストの色" background="背景画像&q...
1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...
フォーム内の読み取り専用および無効な属性1. 読み取り専用:サーバーは、ユーザーがデータを変更するこ...
始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...
毎日jQueryプラグインを学ぶ - フローティングメニュー、参考までに、具体的な内容は次のとおりで...
この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...
データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...
springmvc による Spring の統合Spring 統合 springmvc の web....
序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...
大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...
1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...
MySQL バックアップコールドバックアップ:停止服務進行備份,即停止數據庫的寫入ホットバックアップ...
MySQL を自分でインストールするのに 3 時間かかりました。チュートリアルはたくさんあるにもかか...
公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...