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主キー命名戦略関連

最近、データライフサイクル管理の詳細を整理していたときに、小さな問題を発見しました。それは、MySQ...

Vueはドラッグプログレスバーを実装します

この記事では、ドラッグプログレスバーを実現するためのVueの具体的なコードを例として紹介します。具体...

shtmlとhtmlの違い

Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...

Navicat を仮想マシン MySQL に接続する際によくあるエラーと解決策

質問1 解決するサービスを開始します: service mysqld start; /sbin/ip...

MySQL 5.7 の sql_mode のデフォルト値によって生じる落とし穴と解決策

通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...

Linux で MySQL 5.7.19 をアンインストールする方法

1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...

Mysqlリモート接続構成を実装する2つの方法

Mysqlリモート接続構成を実装する2つの方法会社で働いていると、誰かのコンピュータに保存されている...

JavaScript バブルソートの例

目次1. バブルソートとは何か2. 例を挙げるラウンド1:第2ラウンド:第3ラウンド:第4ラウンド:...

MySQL における KEY、PRIMARY KEY、UNIQUE KEY、INDEX の違い

タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...

フロントエンドセキュリティの詳細な説明: JavaScript の http ハイジャック対策と XSS

目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...

Vue バックグラウンドでステータス ラベルをエレガントに記述する例

目次序文最適化変数の抽出二次包装 el-tag コンポーネント使用要約する序文バックエンドシステムの...

英語: リンクタグはIEでhrefを自動的に補完します

英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

MySQL 8.0.12 のインストールと使用方法のチュートリアル

MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...