Appearance
useLazyAsyncData
默认情况下,useAsyncData
会阻止导航,直到解析其异步处理程序。
useLazyAsyncData
是通过将useAsyncData
的lazy
选项设置为true
的封装,也就是它不会阻塞路由导航。
这意味着需要处理data
为null
的情况(或者通过default
选项给data
设置一个默认值)。
详情阅读:useAsyncData API 文档
示例:
<template>
<div>
{{ pending ? 'Loading' : count }}
</div>
</template>
<script setup>
// 将在获取完数据之前导航。
// 直接在组件模板中处理 pending 状态和 error 状态
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// 因为 count 一开始是空的,所以无法立即访问数据,但可以 watch 它。
})
</script>