Vue项目如何在模板中以文本形式展示Vuex getter返回的数组

你的代码存在3处错误，修改后即可正常渲染getter返回值：

• mapGetters命名空间传参语法错误：模块名"app"和getter数组之间漏写逗号，原写法...mapGetters("app"["getPlaylist"])无法完成getter映射
• showPlaylist计算属性缺失返回值：仅引用this.getPlaylist但没有return，模板无法获取渲染内容
• 模板闭合标签笔误：尾部</template>误写为开口标签<template>，会导致组件解析失败

方式1：展示数组原生格式 #

如果需要渲染和getter存储格式完全一致的文本["appel", "banaan", "kiwi"]，修正后完整代码如下：

<template>
    <div>
      <span>{{ showPlaylist }}</span>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters("app", ["getPlaylist"]),
    showPlaylist() {
      return this.getPlaylist;
    },
  },
};
</script>

方式2：展示拼接后的纯文本 #

如果不需要数组的括号、引号格式，要展示元素拼接的可读文本（如appel, banaan, kiwi），仅需修改showPlaylist返回逻辑：

showPlaylist() {
  return this.getPlaylist.join(', ');
}

Vue DevTools能正常读取到getter数据，说明store层逻辑无问题，修正上述语法错误即可正常展示。

内容的提问来源于stack exchange，提问作者Basta020