Vuex的使用（五）——mapGetters的定义和用法

末蓝、 2022-09-10 11:24 399阅读 0赞

参考文档：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生成的几种计算属性之间没有任何区别。