vuex中辅助函数mapGetters怎样用？一文带你看明白
发布时间：2022-01-07 04:53:26 所属栏目：语言 来源：互联网
导读：本文我们来了解vuex中辅助函数mapGetters，mapGetters辅助函数的作用就仅是将 store 中的 getter 映射到局部计算属性，那么mapGetters用法是什么呢？接下来我们具体的了解看看。 1、在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部st
|
本文我们来了解vuex中辅助函数mapGetters，mapGetters辅助函数的作用就仅是将 store 中的 getter 映射到局部计算属性，那么mapGetters用法是什么呢？接下来我们具体的了解看看。 1、在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部store中的getter <!-- test.vue --> <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 <!-- moduleTest.vue --> <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 } }, }) <!-- Test.vue --> <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: { } } <!-- module test.vue --> <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" // 对象形式下 改变映射 }), （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
