useLazyAsyncData
此 useAsyncData 的包裝函式會立即觸發導覽。
Description
預設情況下，useAsyncData 會封鎖導覽，直到其 async 處理函式解析完成。 useLazyAsyncData 提供了 useAsyncData 的包裝函式，透過將 lazy 選項設定為 true，在處理函式解析完成之前觸發導覽。
useLazyAsyncData 具有與 useAsyncData 相同的簽名。範例
pages/index.vue
<script setup lang="ts">
/* Navigation will occur before fetching is complete.
Handle 'pending' and 'error' states directly within your component's template
*/
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// Because count might start out null, you won't have access
// to its contents immediately, but you can watch it.
})
</script>
<template>
<div>
{{ status === 'pending' ? 'Loading' : count }}
</div>
</template>
useLazyAsyncData 是編譯器轉換的保留函式名稱，因此您不應將自己的函式命名為 useLazyAsyncData。