vuex の補助関数 mapGetters の基本的な使い方の詳細な説明

vuex の補助関数 mapGetters の基本的な使い方の詳細な説明

mapGettersヘルパー関数

mapGettersヘルパー関数は、ストア内のゲッターをローカルの計算プロパティにマップするだけです。

1. コンポーネントまたはインターフェース内の vuex の getter を呼び出すために mapGetter を使用しないでください。

1.1 マッピングのルートストアでゲッターを呼び出す

<!-- test.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>"stateHello: "{{stateHello}}</div>
    <div>"gettersHello: "{{gettersHello}}</div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  時計:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.stateHello
    },
    ゲッターHello() {
      これを返します。$store.getters.gettersHello
    }
  },
  メソッド: {
    変更値() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</スクリプト>
/**
 * ストア
 */
'vue' から Vue をインポートします
'vuex' から Vuex をインポートします

Vue.use(Vuex)
デフォルトの新しいVuex.Storeをエクスポートします({
  州: {
    状態こんにちは: 1
  },
  ゲッター: {
    gettersHello: (状態) => {
      state.stateHello * 2 を返す
    }
  },
  突然変異:
    変異Hello(状態、値) {
      console.log("val", val); // 2
      state.stateHello += val
    }
  },
})

プロセス: クリックして、test.vue インターフェースで changeVal() を呼び出します。changeVal メソッドは、パラメータ val を commite に渡し、store.js で mutationsHello() メソッドを呼び出します。mutationsHello メソッドは、state の stateHello の値を変更します。stateHello の値は、getters の gettersHello で監視されます。stateHello の値の変更により、gettersHello がトリガーされます。計算された test.vue インターフェースでは、store.getters.gettersHello が計算され、gettersHello が store.gettes.gettersHello の値にマップされます。GettersHello は、テンプレートを通じて dom にレンダリングされます。同時に、gettersHello の変更により、watch で gettersHello がトリガーされ、store.getters.gettersHello のデータの変更が監視されることもあります。

1.2 マッピングモジュールのモジュールストアでゲッターを呼び出す

<!-- moduleTest.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  時計:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.vuexTest.stateHello
    },
    ゲッターHello() {
      this.$store.getters['vuexTest/gettersHello'] を返します。
    }
  },
  メソッド: {
    変更値() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</スクリプト>
/**
 * モジュール vuexTest.js
 */
エクスポートデフォルト{
    名前空間: true、
    州: {
        状態Hello: 1,
    },
    ゲッター: {
        gettersHello: (状態、ゲッター、ルート状態、ルートゲッター) => {
            console.log("状態", 状態);
            console.log("ゲッター", ゲッター);
            コンソールにログ出力します。
            コンソールにログ出力します。
            state.stateHello * 2 を返す
        }
    },
    突然変異:
        変異Hello(状態、値) {
            コンソールログ("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    アクション: {

    }
}

computed のマッピング モジュールでゲッターを計算する方法は、モジュールの状態のデータを取得する方法とは異なることに注意してください。

this.$store.getters['vuexTest/gettersHello']

2. mapGetterを使用して、コンポーネントまたはインターフェース内のvuexのゲッターを呼び出す

2.1 マッピングのルートストアでゲッターを呼び出す

/**
 * ストア
 */
 'vue' から Vue をインポートします
 'vuex' から Vuex をインポートします
 
 Vue.use(Vuex)
 デフォルトの新しいVuex.Storeをエクスポートします({
   州: {
     状態こんにちは: 1
   },
   ゲッター: {
     gettersHello: (状態) => {
       state.stateHello * 2 を返す
     }
   },
   突然変異:
     変異Hello(状態、値) {
       state.stateHello += val
     }
   },
 })
<!-- テスト.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</テンプレート>

<スクリプト>
「vuex」から mapGetters をインポートします。
エクスポートデフォルト{
  名前: "vuexReponse",
  コンポーネント:

  },
  データ() {
    戻る {

    }
  },
  時計:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.stateHello
    },
    ...mapGetters(["gettersHello"]), // 配列形式...mapGetters({ // オブジェクト形式 gettersHello: "gettersHello"
    })、
    ...mapGetters({
      gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }),
  },
  メソッド: {
    変更値() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</スクリプト>

2.2 マッピングのルートストアでゲッターを呼び出す

/**
 * vuexTest.js
 */
 エクスポートデフォルト{
    名前空間: true、
    州: {
        状態Hello: 1,
    },
    ゲッター: {
        gettersHello: (状態、ゲッター、ルート状態、ルートゲッター) => {
            console.log("状態", 状態);
            console.log("ゲッター", ゲッター);
            コンソールにログ出力します。
            コンソールにログ出力します。
            state.stateHello * 2 を返す
        }
    },
    突然変異:
        変異Hello(状態、値) {
            コンソールログ("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    アクション: {

    }
}
<!-- モジュール test.vue -->
<テンプレート>
  <div class="vuexResponse">
    <div @click="changeVal">クリック</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</テンプレート>

<スクリプト>
「vuex」から mapGetters をインポートします。
エクスポートデフォルト{
  名前: "vuexReponse",
  時計:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  計算: {
    ステートハロー() {
      これを返します。$store.state.vuexTest.stateHello
    },
    ...mapGetters(["vuexTest/gettersHello"]), // 配列形式...mapGetters("vuexTest", { // オブジェクト形式 gettersHello: "gettersHello"
    })、
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }),
  },
  メソッド: {
    変更値() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</スクリプト>
これら 3 つの形式...mapGetters(["vuexTest/gettersHello"]), // 配列形式...mapGetters("vuexTest", { // オブジェクト形式 gettersHello: "gettersHello"
    })、
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // オブジェクト形式でマッピングを変更します }),

これで、vuex の補助関数 mapGetters の基本的な使い方についての記事は終了です。vuex mapGetters の使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vuex でのゲッター計算とフィルタリング操作の詳細な説明
  • Vuexのゲッター属性の具体的な使い方について話す
  • vuex での mapState、mapGetters、mapActions、mapMutations の使用
  • vuex での Getter の使用法の詳細な説明
  • Vuex でゲッターとアクションを使用するための追加手順

<<:  ユニークインデックスの S ロックと X ロックによる MySQL デッドロック ルーチンの理解

>>:  Nginx でバージョン番号を隠したり偽造したりする方法

推薦する

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

Web ページのエンコーディングで gbk や gb2312 ではなく utf-8 が使用されるのはなぜですか?

選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...

three.js を使用してクールなアシッドスタイルの 3D ページ効果を実現します

この記事では、主にReact + three.jsテクノロジースタックを使用して3Dモデルの読み込み...

Vueにおけるキーの役割と原理の詳細な説明

目次1. 結論から始めましょう2. キーの役割2.1 例2.2 上記の例を修正する2.3 例を再度修...

Golang を使って Docker API を実際に操作する

目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

MySQLデータベースが大きすぎる場合にバックアップと復元を行う方法

コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...

MySQL 20 の高性能アーキテクチャ設計原則 (収集する価値あり)

オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...

Linux ファイルを分割するための split コマンドの詳細な説明

いくつかの簡単な Linux コマンドを使用すると、ストレージまたは電子メールの添付ファイルのサイズ...

JavaScript でイベントのバブリングを防ぐ方法

注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...

Linux サーバー上のローカル静的リソースにアクセスするために nginx を使用する方法

1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...

ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介

a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...

Dockerでmongodbデータベースを使用するための実装コード

mongoイメージを取得する sudo docker pull mongo mongodbサービスを...