vuex での mapState の考え方の応用

vuex での mapState の考え方の応用

背景:

需要開発プロセス中に、一部のインターフェースは、ページに表示する必要がある多くのフィールドを含む結果を返します。通常、これらのフィールドは、.vue ファイル内の計算プロパティとしてカプセル化するか、対応するフィールドをデータ内のフィールドに再割り当てして、使いやすさを実現できます。次のように:

計算された(){
  カウント1(){
    this.targetObj.count1 を返す
  },
  カウント2(){
    this.targetObj.count2 を返す
  },
  // ...
  // これを想像してください。同様のコードを5回または10回書く必要があります}

しかし、どちらの方法を使用したとしても、コードの冗長性が大幅に増加し、非常に不便になります。この問題を解決するために、この記事では、冗長なコードを大幅に削減し、データ取得時に統一されたフォールトトレラント処理を実行できるvuexmapメソッドを使用するというアイデアを借用します。

1. マップ方式

vuex の基本的な状態抽出方法は、次のように使用できます。

計算された(){
  カウント(){
    これを返します。$store.count
  }
}

同時に、 vuexも問題に気づきました。ストアで取得するデータが大量にある場合、この方法では多くのコードの冗長性と繰り返しコードがあらゆる場所で生成されます。計算されたプロパティの定義が多数表示され、オブジェクト プロパティの抽出の長いチェーンも表示されます。そのため、 vuex store内の指定されたデータをバッチで取得するための map メソッドを定義します。
このmapメソッドは、実際には特定の形式の関数を生成するために使用されるファクトリ関数 (高階関数) です。以下はソースコードです。 mapState最終的にオブジェクトresを返すことがわかります。 resの各属性はメソッドであり、このメソッドはstateの値を返します。

  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}
    }
  }
  結果を返す
}

このメソッドの使用方法はmapStateとまったく同じです。従来の値取得方式と比較して、繰り返しコードの量を大幅に削減できます。具体的な用途は以下のとおりです

計算: {
    ...mapTargetValue("targetObj", ["count1", "count2"]),
    ...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}),
}

これで、vuex での mapState のアイデアの適用に関するこの記事は終わりです。より関連性の高い vuex mapState コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3 で状態管理を実装するために provide を使用する方法
  • Vue フロントエンド開発補助機能状態管理詳細例
  • vuexプロジェクトにおけるログインステータス管理の実践プロセス
  • Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します
  • Vueのシンプルな状態管理ストアモードを理解する方法
  • Vueプロジェクトでvuexを使用する方法
  • vuex名前空間の使用
  • Vue の状態管理: Vuex の代わりに Pinia を使用する

<<:  HTMLシールドの右クリックメニューと左クリック入力機能の例

>>:  Dockerでudpポート番号を指定する問題を解決する

推薦する

MySQL のインデックスの種類と基本的な使用例

目次索引- 総合索引- ユニークなインデックス- 主キーインデックス- 複合インデックス- 全文索引...

bodyタグの主な属性の概要

bgcolor="テキストの色" background="背景画像&q...

アダプティブ Web デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)

1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...

フォームの読み取り専用属性と無効な属性についての簡単な説明

フォーム内の読み取り専用および無効な属性1. 読み取り専用:サーバーは、ユーザーがデータを変更するこ...

7つのMySQL JOINタイプのまとめ

始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...

フローティングメニューを実装するjQueryプラグイン

毎日jQueryプラグインを学ぶ - フローティングメニュー、参考までに、具体的な内容は次のとおりで...

Vue+video.jsはビデオプレイリストを実装します

この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

Vmware + Ubuntu18.04 に Hbase 2.3.5 をインストールするための詳細なチュートリアル

序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...

MySQLログシステムの詳細情報共有

大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...

MySQLに画像を保存する方法

1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...

MySQL5.7 mysqldump バックアップとリカバリの実装

MySQL バックアップコールドバックアップ:停止服務進行備份,即停止數據庫的寫入ホットバックアップ...

MySQL 5.7.23 バージョンのインストールチュートリアルと設定方法

MySQL を自分でインストールするのに 3 時間かかりました。チュートリアルはたくさんあるにもかか...

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...