mapGettersHelper functions
mapGettersHelper functions simply map getters in the store to local computed properties:
1. MapGetter is not used in the component or interface to map getters in the vuex
1.1 Call getter in the root store of map
<!-- -->
<template>
<div class="vuexReponse">
<div @click="changeVal">Click</div>
<div>"stateHello： "{{stateHello}}</div>
<div>"gettersHello： "{{gettersHello}}</div>
</div>
</template>
<script>
export default {
watch: {
gettersHello(newVal, oldVal) {
("gettersHello newVal", newVal);
("gettersHello oldVal", oldVal);
}
},
computed: {
stateHello() {
return this.$
},
gettersHello() {
return this.$
}
},
methods: {
changeVal() {
this.$("mutationsHello", 2)
}
}
}
</script>
/**
*
*/
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
export default new ({
state: {
stateHello: 1
},
getters: {
gettersHello: (state) => {
return * 2
}
},
mutations: {
mutationsHello(state, val) {
("val", val); // 2
+= val
}
},
})
Process: Click to call changeVal() in the interface, and the changeVal method passes the parameter val through commit and calls the mutationsHello() method in . The mutationsHello method modifies the value of stateHello in state, listens to the value of stateHello in gettersHello. The change of stateHello triggers gettersHello, and calculates in the interface computed. This maps gettersHello to the value of , renders gettersHello to the dom through the template. At the same time, the change of gettersHello can also trigger gettersHello in watch to realize monitoring of data changes.
1.2 Calling getter in the modules module store
<!-- -->
<template>
<div class="vuexReponse">
<div @click="changeVal">Click</div>
<div>stateHello： {{stateHello}}</div>
<div>gettersHello： {{gettersHello}}</div>
</div>
</template>
<script>
export default {
watch: {
gettersHello(newVal, oldVal) {
("gettersHello newVal", newVal);
("gettersHello oldVal", oldVal);
}
},
computed: {
stateHello() {
return this.$
},
gettersHello() {
return this.$['vuexTest/gettersHello']
}
},
methods: {
changeVal() {
this.$("vuexTest/mutationsHello", 2)
}
}
}
</script>
/**
* Module
*/
export default {
namespaced: true,
state: {
stateHello: 1,
},
getters: {
gettersHello: (state, getters, rootState, rootGetters) => {
("state", state);
("getters", getters);
("rootState", rootState);
("rootGetters", rootGetters);
return * 2
}
},
mutations: {
mutationsHello(state, val) {
("1111");
("val", val);
+= val
}
},
actions: {
}
}
The thing to note is that when calculating the getters method in the computed module, the call method is different from the data in the state in the module.
this.$['vuexTest/gettersHello']
2. Use mapGetter to map getters in vuex in component or interface
2.1 Call getter in the root store of map
/**
*
*/
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
export default new ({
state: {
stateHello: 1
},
getters: {
gettersHello: (state) => {
return * 2
}
},
mutations: {
mutationsHello(state, val) {
+= val
}
},
})
<!-- -->
<template>
<div class="vuexReponse">
<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) {
("gettersHello newVal", newVal);
("gettersHello oldVal", oldVal);
}
},
computed: {
stateHello() {
return this.$
},
...mapGetters(["gettersHello"]), // Array form ...mapGetters({ // Object form gettersHello: "gettersHello"
}),
...mapGetters({
gettersHelloOther: "gettersHello" // Change the mapping in object form }),
},
methods: {
changeVal() {
this.$("mutationsHello", 2)
}
}
}
</script>
2.2 Calling getter in the root store of map
/**
*
*/
export default {
namespaced: true,
state: {
stateHello: 1,
},
getters: {
gettersHello: (state, getters, rootState, rootGetters) => {
("state", state);
("getters", getters);
("rootState", rootState);
("rootGetters", rootGetters);
return * 2
}
},
mutations: {
mutationsHello(state, val) {
("1111");
("val", val);
+= val
}
},
actions: {
}
}
<!-- module -->
<template>
<div class="vuexReponse">
<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) {
("gettersHello newVal", newVal);
("gettersHello oldVal", oldVal);
}
},
computed: {
stateHello() {
return this.$
},
...mapGetters(["vuexTest/gettersHello"]), // Array form ...mapGetters("vuexTest", { // Object form gettersHello: "gettersHello"
}),
...mapGetters("vuexTest", {
gettersHelloOther: "gettersHello" // Change the mapping in object form }),
},
methods: {
changeVal() {
this.$("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 is the article about the basic usage of mapGetters in vuex. This is the end of this article. For more related content on using vuex mapGetters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!