本文我们来了解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" // 对象形式下 改变映射
    }),

    以上就是关于vuex中辅助函数mapGetters的介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考。最后，希望大家阅读完这篇文章能有所收获，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery跨域访问的解决方法及要点是什么

  jQuery跨域访问的解决方法及要点是什么？跨域访问一直都是程序员们头疼的问题，对于很多用户们来说都不知道如何解决，好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘.

• vue项目出现缩进报错的问题怎样解决

  idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧

• React项目打包后进行访问出现404怎么办呢

  react打包后 路由apache访问404,react项目使用了路由，项目打包后，使用apache服务器访问，能够正常显示，但是刷新后页面404了刷新页面时访问的资源在服务端找不到，因为react-router设置的路径不是真实存

• JS变量声明提升如何理解，实现方法是什么？

  本文实例讲述了JavaScript变量声明提升。分享给大家供大家参考，具体如下：

• 用JS怎样实现简单的动态表格效果？

  这篇文章主要给大家分享用JS实现动态表格效果，也就是点击增加或者删除就可以自动增加或删除表格的行，小编觉得还是比较实用的，感兴趣的朋友可以参考一下，希望大家阅读完这篇文章能有所收获，下面我们一起来学习一下吧。