vue.js - 来自 api 的 Vue 3 data.name 在脚本 setup() 中未定义，但在模板中呈现

Question

我还是 Vue 的新手，在 Vue3 组合 API 的脚本 setup() 中使用来自 api 的数据时遇到了麻烦。

 const  data = computed(() => store.getters['projectSettings/getData']);

我通过 store.getters 获取数据并将其返回并在模板中呈现。这很好用。

<cc-headline tag="h1">{{ data.name }}</cc-headline>

但是如果我想在 setup() 中使用相同的数据，它是未定义的

const  data = computed(() => store.getters['projectSettings/getData']);

console.log(data.name)

我究竟做错了什么？

标签： vue.jsvuexvuejs3vue-composition-api

Answer 1

如果要在setup函数中打印计算属性，则必须使用console.log(data.value.name).

在模板中它正在工作，因为data.value如果您通过渲染它，它会自动解析为{{ data }}

查看文档以了解更多信息：https ://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-properties