Vuex的使用（五）——mapGetters的定义和用法[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

参考文档：https://vuex.vuejs.org/zh/guide/

当需要在组件中使用多个getters时，可以利用mapGetters批量生成计算属性（新增文件路径为src\components\componentE.vue，可以通过切换示例中注释的计算变量来查看对应的页面效果），代码如下：

<template>
    <div>
        <span>mapGetters用法</span>
        <br />
        <span>getters in vuex：{
  
  {param2}}</span>
    </div>
</template>

<script> import { 
      mapGetters } from "vuex"; export default { 
      name: "component-e", // 基础写法，与state基本相同，唯一的区别是state在引用时用的是this.$store.state[xxx]，getters在引用时用的是this.$store.getters[xxx] // computed: { 
      // param2() { 
      // return this.$store.getters["param2"]; // } // } // 要注意的是，Vuex禁止开发者在mapGetters中对getters进行二次处理，所以以下写法是不行的（如果业务缺失需要，则应该采用上面的基础写法），控制台会提示：unknown getter: getters => getters.param2 // computed: mapGetters({ 
      // param2: getters => getters.param2 // }) // mapGetters允许的写法（这个写法无法对getters进行二次处理），与mapState基本相同，唯一的区别是需要import mapGetters，且创建的是mapGetters对象 // computed: mapGetters({ 
      // param2: "param2" // }) // 与mapState一样mapGetters也允许简化写法 // computed: mapGetters(["param2"]) // 与局部计算变量混用(mapGetters与mapState混用时也需要按照以下写法定义state和getters) computed: { 
      computedParam() { 
      return "computedParam"; }, ...mapGetters(["param2"]) } }; </script>

<style scoped> </style>

引用上面创建的component-e查看效果（修改文件路径为src\main.js），代码如下：

import Vue from 'vue'
import store from './store'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'
import ComponentD from './components/ComponentD.vue'
import ComponentE from './components/ComponentE.vue'

new Vue({ 
   
    el: '#app',
    store,
    components: { 
    ComponentA, ComponentB, ComponentC, ComponentD, ComponentE },
    template: '<div><component-a></component-a><component-b></component-b><component-c></component-c><component-d></component-d><component-e></component-e></div>'
});

运行后查看页面可以看到示例代码中通过mapGetters生成的几种计算属性之间没有任何区别。