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ポート番号を指定する問題を解決する

推薦する

優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標

はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...

docker pull imageエラーの問題を解決する

説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...

vue3.0 sfcのセットアップの変更について簡単に説明します。

目次序文標準的なSFCの書き方スクリプト設定可変露出部品の取り付け小道具カスタムイベント要約する序文...

html2canvas で破線境界線を実装する例

html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバ...

Linux コマンドライン操作 Baidu クラウドのファイルのアップロードとダウンロード

目次0. 背景1. インストール2. Baidu Cloudアカウントにログインする3. ファイルを...

Nginx設定ファイルの詳細な説明

Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

Vue + OpenLayers クイックスタートチュートリアル

Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な Jav...

Windows 7 で Python 3.4 を使って MySQL データベースを使用する

Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...

Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法

この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...

React+Typescriptはカウントダウンフックメソッドを実装します

まず、setIntervalはフックとしてカプセル化されます👇 'react' から...

PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明

概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...

vue.config.js パッケージ最適化構成

Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...

Nginx Rewrite の使用シナリオとコード例の詳細な説明

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....