Typescript 如何在数据加载完成之前处理Vue组件内容

我正在将Prismic的一些产品类别数据加载到我的Nuxt项目中，我正在寻找关于最佳实践的一些澄清。具体地说，如何处理数据仍在提取中且侧边栏中没有显示内容的状态

现在，我的工作是：

我有一个边栏组件（

sidebar.vue

）：

{{navigation.heading}
导出默认值{
数据（）{
返回{
导航：新导航（“类别”）
}
},
异步装入（）{
常数=这个
this.fetchCategories（）
.然后（函数（）{
that.navigation=that.$store.getters.navigation
})
},
方法：{
…映射操作（{fetchCategories:'fetchCategories'}）
}
}

如您所见，我有一个

导航

属性，它将包含填充边栏所需的所有数据。目前，我已经初始化了一个占位符实例（

new Navigation（'Categories'）

），因为如果没有这个实例，Vue会报告

Navigation

未定义

这并不是一个理想的解决方法。在加载数据之前，在不提供占位符实例的情况下，处理此中间状态的最合适方法是什么？

Nuxt在这里可能很有用。它公开了

$fetchState

（包括

挂起

、

错误

和

时间戳

）以强制使用或在模板中使用。在呈现

导航

数据之前，您的模板可以检查

挂起

标志：

我真的不认为你做的有什么错。您正在为
导航
属性指定一个类型，该类型将在调试等过程中对您有所帮助，现在只需确保在使用它之前进行
null
检查，然后继续IMHO。太棒了！我知道我当前的实现有点不对劲。现在页面加载更加无缝，代码更加干净。谢谢