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

Logo

前往低代码交流专区

更多推荐