vuex中辅助函数mapGetters怎么使用

这篇"vuex中辅助函数mapGetters怎么使用"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"vuex中辅助函数mapGetters怎么使用"文章吧。

mapGetters辅助函数

mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

1、在组件或界面中不使用mapGetter调用映射vuex中的getter　　

1.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) {      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

/** * 模块 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     }   }, })

　　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: {    }}

这三种形式　　...mapGetters(["vuexTest/gettersHello"]), // 数组形式    ...mapGetters("vuexTest", {   // 对象形式       gettersHello: "gettersHello"    }),    ...mapGetters("vuexTest", {      gettersHelloOther: "gettersHello" // 对象形式下 改变映射    }),

以上就是关于"vuex中辅助函数mapGetters怎么使用"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。