vuex中辅助函数mapGetters怎么使用
这篇“vuex中辅助函数mapGetters怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vuex中辅助函数mapGetters怎么使用”文章吧。
10年积累的成都网站设计、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有涿州免费网站建设让你可以放心的选择与我们合作。
mapGetters
辅助函数
mapGetters
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
1、在组件或界面中不使用mapGetter调用映射vuex中的getter
1.1 调用映射根部store中的getter
点击"stateHello: "{{stateHello}}"gettersHello: "{{gettersHello}}
/** * 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
点击stateHello: {{stateHello}}gettersHello: {{gettersHello}}
/** * 模块 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 } }, })
点击stateHello: {{stateHello}}gettersHello: {{gettersHello}}gettersHelloOther {{gettersHelloOther}}
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: { } }
点击stateHello: {{stateHello}}gettersHello: {{gettersHello}}gettersHelloOther {{gettersHelloOther}}
这三种形式 ...mapGetters(["vuexTest/gettersHello"]), // 数组形式 ...mapGetters("vuexTest", { // 对象形式 gettersHello: "gettersHello" }), ...mapGetters("vuexTest", { gettersHelloOther: "gettersHello" // 对象形式下 改变映射 }),
以上就是关于“vuex中辅助函数mapGetters怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
分享文章:vuex中辅助函数mapGetters怎么使用
分享URL:http://myzitong.com/article/pggpgh.html