如何在组件之间并行抓取？

Question

在Nuxt 3中，当使用fetch来获取应该在组件中使用的页面的数据时，在组件中等待它的正确方法是什么？

app.vue

<templage>
  <Sidebar/>
  <NuxtPage>
</template

page.vue

const paramsStore = useParamsStore();
const {category} = storeToRefs(paramsStore);

const {data: product} = await useFetch('/api/product', {
  params: { ... }
});
category.value = product.value.category;

侧边栏.vue

const paramsStore = useParamsStore();
const {category} = storeToRefs(paramsStore);

const {data: sidebar} = await useFetch('/api/sidebar', {
  params: { 
    category: category.value    // <<< need to wait for the product fetch to finish
 }
});

Answer 1

只需将待处理添加到您的代码中即可。当它从服务器获取数据时，挂起为 true，并且它显示了一个微调器。

<div v-show="pending">
/// a spiner tag comes here

在你的脚本设置中

const {pending, data: sidebar} = await useFetch('/api/sidebar', .....