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

Analysis of uniapp entry-level nvue climbing pit record

Table of contents Preface Hello World image Set b...

Will the deprecated Docker be replaced by Podman?

The Kubernetes team recently announced that it wi...

Introduction to the properties of B-Tree

B-tree is a common data structure. Along with him...

Mysql8.0 uses window functions to solve sorting problems

Introduction to MySQL Window Functions MySQL has ...

How to use the VS2022 remote debugging tool

Sometimes you need to debug remotely in a server ...

How to remove inline styles defined by the style attribute (element.style)

When modifying Magento frequently, you may encount...

Example of nginx ip blacklist dynamic ban

When a website is maliciously requested, blacklis...

Use xshell to connect to the Linux server

Benefits of using xshell to connect to Linux We c...

A detailed analysis of the murder caused by a misplaced double quote in MySQL

1. Introduction Recently, I often encounter devel...

MySql inserts data successfully but reports [Err] 1055 error solution

1. Question: I have been doing insert operations ...

How to encapsulate timer components in Vue3

background When you open the product details on s...

Nginx+FastDFS to build an image server

Installation Environment Centos Environment Depen...

Use of MySQL query rewrite plugin

Query Rewrite Plugin As of MySQL 5.7.6, MySQL Ser...

The scroll bar position is retained when scrolling the vant list component

The scroll bar position is retained when scrollin...

How to use docker-compsoe to deploy a project with front-end and back-end separation

Say it in advance We all know that Docker can ach...