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

Example code for implementing 3D Rubik's Cube with CSS

Let's make a simple 3D Rubik's Cube today...

Select does not support double click dbclick event

XML/HTML CodeCopy content to clipboard < div c...

MySQL uses inet_aton and inet_ntoa to process IP address data

This article will introduce how to save IP addres...

getdata table table data join mysql method

public function json_product_list($where, $order)...

Use a diagram to explain what Web2.0 is

Nowadays we often talk about Web2.0, so what is W...

js to achieve interesting countdown effect

js interesting countdown case, for your reference...

Linux disk management LVM usage

1. Introduction to LVM When we manage Linux disks...

mysql create database, add users, user authorization practical method

1. Create a MySQL database 1. Create database syn...

Installation tutorial of the latest stable version of MySQL 5.7.17 under Linux

Install the latest stable version of MySQL on Lin...

Example of how to modify styles via CSS variables

question How to modify CSS pseudo-class style wit...

How to remotely connect to MySQL database with Navicat Premium

The party that creates a new connection is equiva...

mysql-8.0.15-winx64 decompression version installation tutorial and three ways to exit

1. Download from the official website and unzip h...

Deeply understand how nginx achieves high performance and scalability

The overall architecture of NGINX is characterize...

JavaScript data transmission between different pages (URL parameter acquisition)

On web pages, we often encounter this situation: ...

MySQL 5.7.20\5.7.21 free installation version installation and configuration tutorial

mysql download, install and configure 5.7.20 / 5....