大家好，又见面了，我是你们的朋友全栈君。
参考文档：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生成的几种计算属性之间没有任何区别。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/142871.html原文链接：https://javaforall.net
