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

Detailed example of using if statement in mysql stored procedure

This article uses an example to illustrate the us...

Installation of CUDA10.0 and problems in Ubuntu

The correspondence between tensorflow version and...

Implementation of effective user groups and initial user groups in Linux

First check the /etc/group file: [root@localhost ...

Practical tutorial on modifying MySQL character set

Preface: In MySQL, the system supports many chara...

Loading animation implemented with CSS3

Achieve results Implementation Code <h1>123...

50 lines of code to implement Webpack component usage statistics

background Recently, a leader wanted us to build ...

In-depth understanding of React Native custom routing management

Table of contents 1. Custom routing 2. Tab naviga...

MySQL 5.7.19 winx64 free installation version configuration tutorial

mysql-5.7.19-winx64 installation-free version con...

Linux ssh server configuration code example

Use the following terminal command to install the...

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Overview Prometheus is an open source service mon...

Docker implements re-tagging and deleting the image of the original tag

The docker image id is unique and can physically ...

In-depth understanding of HTML form input monitoring

Today I saw a blog post about input events, and o...

HTML Basic Notes (Recommended)

1. Basic structure of web page: XML/HTML CodeCopy...

How to start the spring-boot project using the built-in linux system in win10

1. Install the built-in Linux subsystem of win10 ...

Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation

Table of contents Introduction to bootstrap and i...