Detailed explanation of the basic usage of the auxiliary function mapGetters in vuex

Detailed explanation of the basic usage of the auxiliary function mapGetters in vuex

mapGetters Helper Function

mapGetters helper function simply maps the getters in the store to local computed properties:

1. Do not use mapGetter to call the getter in vuex in the component or interface

1.1 Call the getter in the root store of the mapping

<!-- test.vue -->
<template>
  <div class="vuexResponse">
    <div @click="changeVal">Click</div>
    <div>"stateHello： "{{stateHello}}</div>
    <div>"gettersHello: "{{gettersHello}}</div>
  </div>
</template>
<script>
export default {
  watch:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.stateHello
    },
    gettersHello() {
      return this.$store.getters.gettersHello
    }
  },
  methods: {
    changeVal() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</script>
/**
 * store.js
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    stateHello: 1
  },
  getters: {
    gettersHello: (state) => {
      return state.stateHello * 2
    }
  },
  mutations:
    mutationsHello(state, val) {
      console.log("val", val); // 2
      state.stateHello += val
    }
  },
})

Process: Click to call changeVal() in the test.vue interface. The changeVal method passes the parameter val through commite and calls the mutationsHello() method in store.js. The mutationsHello method modifies the value of stateHello in state. The value of stateHello is monitored in gettersHello of getters. The change of the value of stateHello triggers gettersHello. In the test.vue interface computed, store.getters.gettersHello is calculated, which maps gettersHello to the value of store.gettes.gettersHello. GettersHello is rendered into the dom through the template. At the same time, the change of gettersHello can also trigger gettersHello in watch, thereby monitoring the data changes of store.getters.gettersHello.

1.2 Call the getter in the mapping modules module store

<!-- moduleTest.vue -->
<template>
  <div class="vuexResponse">
    <div @click="changeVal">Click</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
  </div>
</template>

<script>
export default {
  watch:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.vuexTest.stateHello
    },
    gettersHello() {
      return this.$store.getters['vuexTest/gettersHello']
    }
  },
  methods: {
    changeVal() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</script>
/**
 * Module vuexTest.js
 */
export default {
    namespaced: true,
    state: {
        stateHello: 1,
    },
    getters: {
        gettersHello: (state, getters, rootState, rootGetters) => {
            console.log("state", state);
            console.log("getters", getters);
            console.log("rootState", rootState);
            console.log("rootGetters", rootGetters);
            return state.stateHello * 2
        }
    },
    mutations:
        mutationsHello(state, val) {
            console.log("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    actions: {

    }
}

It should be noted that the method of calculating the getters in the mapping module in computed is different from the method of getting the data in the state of the module.

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

2. Use mapGetter to call the getter in vuex in the component or interface

2.1 Call the getter in the root store of the mapping

/**
 * store.js
 */
 import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     stateHello: 1
   },
   getters: {
     gettersHello: (state) => {
       return state.stateHello * 2
     }
   },
   mutations:
     mutationsHello(state, val) {
       state.stateHello += val
     }
   },
 })
<!-- Test.vue -->
<template>
  <div class="vuexResponse">
    <div @click="changeVal">Click</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "vuexReponse",
  components:

  },
  data() {
    return {

    }
  },
  watch:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.stateHello
    },
    ...mapGetters(["gettersHello"]), // array form...mapGetters({ // object form gettersHello: "gettersHello"
    }),
    ...mapGetters({
      gettersHelloOther: "gettersHello" // Change the mapping in object form }),
  },
  methods: {
    changeVal() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</script>

2.2 Calling the getter in the root store of the mapping

/**
 * vuexTest.js
 */
 export default {
    namespaced: true,
    state: {
        stateHello: 1,
    },
    getters: {
        gettersHello: (state, getters, rootState, rootGetters) => {
            console.log("state", state);
            console.log("getters", getters);
            console.log("rootState", rootState);
            console.log("rootGetters", rootGetters);
            return state.stateHello * 2
        }
    },
    mutations:
        mutationsHello(state, val) {
            console.log("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    actions: {

    }
}
<!-- module test.vue -->
<template>
  <div class="vuexResponse">
    <div @click="changeVal">Click</div>
    <div>stateHello: {{stateHello}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "vuexReponse",
  watch:
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.vuexTest.stateHello
    },
    ...mapGetters(["vuexTest/gettersHello"]), // Array form...mapGetters("vuexTest", { // Object form gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // Change the mapping in object form }),
  },
  methods: {
    changeVal() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</script>
These three forms...mapGetters(["vuexTest/gettersHello"]), // Array form...mapGetters("vuexTest", { // Object form gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // Change the mapping in object form }),

This concludes this article about the basic usage of the auxiliary function mapGetters in vuex. For more relevant vuex mapGetters usage content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of getters calculation and filtering operations in vuex
  • Talk about the specific usage of Vuex's getters attributes
  • Use of mapState, mapGetters, mapActions, and mapMutations in vuex
  • Detailed explanation of Getter usage in vuex
  • Additional instructions for using getters and actions in Vuex

<<:  Understanding MySQL deadlock routines through unique index S lock and X lock

>>:  How to hide and forge version number in Nginx

Recommend

How to modify the time zone and time in Ubuntu system

On a Linux computer, there are two times, one is ...

What to do if you forget your mysql password

Solution to forgetting MySQL password: [root@loca...

Analysis and opinions on the design of the product details description page on Taobao website (picture)

...

Docker+nacos+seata1.3.0 installation and usage configuration tutorial

I spent a day on it before this. Although Seata i...

Example analysis to fix problems in historical Linux images

Fix for issues with historical Linux images The E...

A colorful cat under Linux

Friends who have used the Linux system must have ...

Detailed example of deploying Nginx+Apache dynamic and static separation

Introduction to Nginx dynamic and static separati...

The ultimate solution for playing background music in Firefox browser (Chrome multi-browser compatible)

The recommended code for playing background music ...

Share the pitfalls of MySQL's current_timestamp and their solutions

Table of contents MySQL's current_timestamp p...

CentOS 7.9 installation and configuration process of zabbix5.0.14

Table of contents 1. Basic environment configurat...

Network configuration of Host Only+NAT mode under VirtualBox

The network configuration of Host Only+NAT mode u...

How to view the execution time of SQL statements in MySQL

Table of contents 1. Initial SQL Preparation 2. M...

Complete steps to upgrade Nginx http to https

The difference between http and https is For some...

Implementation of MySQL custom list sorting by specified field

Problem Description As we all know, the SQL to so...

Springboot uses vue+echarts front-end and back-end interaction to realize dynamic donut chart

Table of contents Preface 1. Environment Configur...