mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性，在组件或界面中不使用mapGetter调用映射vuex中的getter，在组件或界面中使用mapGetter调用映射vuex中的getter，具体内容跟随小编一起通过本文学习吧
mapGetters辅助函数
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
1、在组件或界面中不使用mapGetter调用映射vuex中的getter
1.1 调用映射根部store中的getter
<!-- test.vue --> <div class="vuexReponse"> <div>点击</div><div>"stateHello： "{{stateHello}}</div><div>"gettersHello： "{{gettersHello}}</div></div>
/** * 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的值，在gette本文来源gaodai#ma#com搞*代#码9网#rs 的 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 --> <div class="vuexReponse"> <div>点击</div><div>stateHello： {{stateHello}}</div><div>gettersHello： {{gettersHello}}</div></div>
/** * 模块 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 --> <div class="vuexReponse"> <div>点击</div><div>stateHello： {{stateHello}}</div><div>gettersHello： {{gettersHello}}</div><div>gettersHelloOther {{gettersHelloOther}}</div></div>
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 --> <div class="vuexReponse"> <div>点击</div><div>stateHello： {{stateHello}}</div><div>gettersHello： {{gettersHello}}</div><div>gettersHelloOther {{gettersHelloOther}}</div></div>
这三种形式 ...mapGetters(["vuexTest/gettersHello"]), // 数组形式 ...mapGetters("vuexTest", { // 对象形式 gettersHello: "gettersHello" }), ...mapGetters("vuexTest", { gettersHelloOther: "gettersHello" // 对象形式下 改变映射 }),
以上就是vuex 中辅助函数mapGetters的基本用法详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vuex 中辅助函数mapGetters的基本用法详解
