vuex中辅助函数mapGetters怎样用？一文带你看明白

发布时间：2022-11-12 11:11:58 所属栏目：语言来源：

导读：　　本文我们来了解vuex中辅助函数mapGetters，mapGetters辅助函数的作用就仅是将 store 中的 getter 映射到局部计算属性，那么mapGetters用法是什么呢？接下来我们具体的了解看看。
　　
　　1、在组件或界面中不

本文我们来了解vuex中辅助函数mapGetters，mapGetters辅助函数的作用就仅是将 store 中的 getter 映射到局部计算属性，那么mapGetters用法是什么呢？接下来我们具体的了解看看。
　　
　　1、在组件或界面中不使用mapGetter调用映射vuex中的getter　　
　　1.1 调用映射根部store中的getter
　　
　　<template>
　　 <div class="vuexReponse">
　　    <div @click="changeVal">点击</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
　　    }
　　 },
　　})
　　　　流程：在test.vue 界面中点击调用changeVal(), changeVal方法通过commite 传参val 并调用 store.js中的mutationsHello() 方法，mutationsHello方法修改state中的stateHello的值，在getters 的 gettersHello 中监听stateHello的值，stateHello的值的改变触发了gettersHello，在test.vue界面computed 中计算了 store.getters.gettersHello ,这个就将gettersHello 映射到 store.gettes.gettersHello 的值，通过模板将gettersHello 渲染到dom中，同时由于gettersHello 的改变也能触发watch中gettersHello，实现对store.getters.gettersHello 数据改变的监听。
　　
　　　　1.2 调用映射modules模块store中的getter
　　
　　<template>
　　 <div class="vuexReponse">
　　    <div @click="changeVal">点击</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>
　　/**
　　 * 模块 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: {
　　
　　    }
　　}
　　　　需要注意的地方是在 computed 中计算映射模块中的getters 的方法时调用方式与获取模块中的state 中的数据不同
　　
　　this.$store.getters['vuexTest/gettersHello']
　　2、在组件或界面中使用mapGetter调用映射vuex中的getter　　
　　2.1 调用映射根部store中的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
　　     }
　　   },
　　   mutations: {
　　     mutationsHello(state, val) {
　　       state.stateHello += val
　　     }
　　   },
　　 })
　　
　　<template>
　　 <div class="vuexReponse">
　　    <div @click="changeVal">点击</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"]), // 数组形式
　　    ...mapGetters({   // 对象形式
　　      gettersHello: "gettersHello"
　　    }),
　　    ...mapGetters({
　　      gettersHelloOther: "gettersHello" // 对象形式下改变映射
　　    }),
　　 },
　　 methods: {
　　    changeVal() {
　　      this.$store.commit("mutationsHello", 2)
　　    }
　　 }
　　}
　　</script>
　　　　2.2 调用映射根部store中的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: {
　　
　　    }
　　}
　　
　　<template>
　　 <div class="vuexReponse">
　　    <div @click="changeVal">点击</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"]), // 数组形式
　　    ...mapGetters("vuexTest", {   // 对象形式
　　      gettersHello: "gettersHello"
　　    }),
　　    ...mapGetters("vuexTest", {
　　      gettersHelloOther: "gettersHello" // 对象形式下改变映射
　　    }),
　　 },
　　 methods: {
　　    changeVal() {
　　      this.$store.commit("vuexTest/mutationsHello", 2)
　　    }
　　 }
　　}
　　</script>
　　这三种形式
　　　　...mapGetters(["vuexTest/gettersHello"]), // 数组形式
　　    ...mapGetters("vuexTest", {   // 对象形式
　　      gettersHello: "gettersHello"
　　    }),
　　    ...mapGetters("vuexTest", {
　　      gettersHelloOther: "gettersHello" // 对象形式下改变映射
　　    }),

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

深度优先生成树和广度	Java截取新闻标题
Python pass语句及其用	C++类的定义和对象的建

vuex中辅 助函数mapGetters怎样用？一文带你看明白

vuex中辅助函数mapGetters怎样用？一文带你看明白