Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use mapGetters in vuex", so the editor summarizes the following, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use mapGetters in vuex" article.

MapGetters auxiliary function

The mapGetters helper function simply maps the getter in store to a local evaluation attribute:

1. Do not use mapGetter in the component or interface to call getter 1.1 in the mapping vuex. Call getter in the root store of the map. Click "stateHello:" {{stateHello}} "gettersHello:" {{gettersHello}} 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)} / * 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, listens for the value of stateHello in the gettersHello of getters, the change in the value of stateHello triggers gettersHello, calculates store.getters.gettersHello in test.vue interface computed, which maps gettersHello to the value of store.gettes.gettersHello, and renders gettersHello into dom through templates At the same time, due to the change of gettersHello, the gettersHello in watch can be triggered to monitor the change of store.getters.gettersHello data.

Click stateHello: {{stateHello}} gettersHello: {{gettersHello}} 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)} / * 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 data in the state in the fetching module.

This.$store.getters ["vuexTest/gettersHello"] 2. Call getter 2.1in the mapping vuex using mapGetter in the component or interface to call getter/** * 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}}) in the mapping root store. Mutations: {mutationsHello (state, val) {state.stateHello + = val}},}) Click stateHello: {{stateHello}} gettersHello: {{gettersHello}} gettersHelloOther {{gettersHelloOther}} 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 mapping} in object form}),} Methods: {changeVal () {this.$store.commit ("mutationsHello", 2)} 2.2 call getter/** * 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: {}} Click stateHello: {{stateHello}} gettersHello: {{gettersHello}} gettersHelloOther {{gettersHelloOther}} 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 mapping in the form of object}),}, methods: {changeVal () {this.$store.commit ("vuexTest/mutationsHello", 2)}. MapGetters (["vuexTest/gettersHello"]), / / array form. MapGetters ("vuexTest") {/ / object form gettersHello: "gettersHello"}),... mapGetters ("vuexTest", {gettersHelloOther: "gettersHello" / / change mapping} in object form}). This is the content of this article on "how to use helper function mapGetters in vuex". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.