typescript - 如何在数据加载完成之前处理 Vue 组件内容
问题描述
我正在将一些来自 Prismic 的产品类别数据加载到我的 Nuxt 项目中,并且我正在寻找有关最佳实践的一些说明。具体来说,如何处理数据仍在获取中,并且侧边栏没有内容可显示的状态。
现在,这就是我的工作:
我有一个侧边栏组件 ( Sidebar.vue
):
<template>
<div class="xl:flex-shrink-0 xl:w-64 border-r border-gray-200 pt-5 pb-4 bg-white overflow-y-auto ">
<h3 class="text-xl font-bold text-gray-800">{{ navigation.heading }}</h3>
<div class="mt-5 flex-grow flex flex-col">
<nav class="flex-1 px-2 space-y-1 bg-white" aria-label="Sidebar">
<div v-for="(category, index) in navigation.categories" :key="index">
<SidebarItem v-if="!category.subcategories.length" :category="category"/>
<SidebarSection v-else-if="category.subcategories.length" @click="toggleExpansion(index)" :category="category"/>
</div>
</nav>
</div>
</div>
</template>
<script lang="ts">
export default {
data() {
return {
navigation: new Navigation('Categories')
}
},
async mounted() {
const that = this
this.fetchCategories()
.then(function() {
that.navigation = that.$store.getters.navigation
})
},
methods: {
...mapActions({ fetchCategories: 'fetchCategories' })
}
}
</script>
如您所见,我有一个navigation
属性,它将包含填充侧边栏所需的所有数据。目前,我已经初始化了一个占位符实例 ( new Navigation('Categories')
),因为没有这个,Vue 报告它navigation
是未定义的。
这感觉不是解决此问题的理想方法。在不提供占位符实例的情况下,在加载数据之前处理此中间状态的最合适方法是什么?
解决方案
Nuxt 的fetch
钩子在这里可能很有用。它公开$fetchState
(包括pending
、error
和timestamp
)以强制使用或在您的模板中使用。您的模板可以pending
在呈现navigation
数据之前检查标志:
<template>
<div v-if="!$fetchState.pending"
class="xl:flex-shrink-0 xl:w-64 border-r border-gray-200 pt-5 pb-4 bg-white overflow-y-auto">
<h3 class="text-xl font-bold text-gray-800">{{ navigation.heading }}</h3>
<div class="mt-5 flex-grow flex flex-col">
<nav class="flex-1 px-2 space-y-1 bg-white" aria-label="Sidebar">
<div v-for="(category, index) in navigation.categories" :key="index">
<SidebarItem v-if="!category.subcategories.length" :category="category"/>
<SidebarSection v-else-if="category.subcategories.length" @click="toggleExpansion(index)" :category="category"/>
</div>
</nav>
</div>
</div>
</template>
<script lang="ts">
export default {
// BEFORE:
// async mounted() {
// const that = this
// this.fetchCategories()
// .then(function() {
// that.navigation = that.$store.getters.navigation
// })
// },
// AFTER:
async fetch() {
await this.fetchCategories()
this.navigation = this.$store.getters.navigation
},
}
</script>
推荐阅读
- apache-spark - pyspark 动态过滤
- java - Spring Boot 2:IntegrationTest 不应执行 CommandLineRunner impl
- python - 如何用其他数据框列值替换文件夹中所有 csv 文件的数据框列值?
- javascript - 如何不删除 JS 打字机效果中的第一个单词?
- javascript - 所有样式都在 index.html 中插入内联
- common-lisp - 参数未按预期传递给 lisp 宏
- linux - 为什么我有多个产品和供应商 ID?
- angular - 在 NGRX 效果中访问状态
- linux-kernel - 在节点上找不到 /var/log/kern.log 是否合理?
- android - 我无法将图像保存在 android KitKat 的私人文件中