vue3 对象深度反应性工作正常但出现错误

Question

我正在使用组合 api 通过 firestore 获取数据，渲染视图工作正常但控制台出现一些错误并且 vue-router 无法正常工作，这可能是 vue 深度反应的原因。这是我的设置函数。

setup() {
const route = useRoute();
const state = reactive({});
const getData = async () => {
  const snapshot = await articlesCollection
    .doc(auth.currentUser.uid + "/userArticles/" + route.params.aID)
    .get();
  state.article = snapshot.data();
  console.log(state.article);
};
getData();
return {
  state,
};

模板是这样的

<span class="text-lg font-semibold ml-2">
   {{ state.article.author.name }}
</span>

这是我得到的错误，控制台显示：未捕获（承诺）TypeError：无法读取未定义的属性 'author'

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

为什么它不是反应式的？我希望有人能在这里帮助我。非常感谢。

Answer 1

state的初始值为{}
当它呈现您的 state.article.author.name 时，它会抛出一个错误。
要修复它，您可以在模板中添加判断

<span class="text-lg font-semibold ml-2">
   {{ state.article && state.article.author.name }}
</span>

vue3 对象深度反应性工作正常但出现错误

vue3 object deep reactivity works fine but getting error

javascript

vue.js

vue-composition-api