useLazyAsyncData · Nuxt Composables

描述

預設情況下，useAsyncData 會阻止導航，直到其非同步處理程序解析完成。useLazyAsyncData 提供了一個 useAsyncData 的包裝器，藉由將 lazy 選項設為 true，在處理程序解析完成之前觸發導航。

useLazyAsyncData 具有與 useAsyncData 相同的簽名。

請參閱文件 > API > Composables > 使用非同步資料以了解更多資訊。

範例

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。

請參閱文件 > 開始使用 > 資料擷取以了解更多資訊。

useHydration

允許完全控制水合週期，以設定和接收來自伺服器的資料。

useLazyFetch

此 `useFetch` 的包裝器會立即觸發導航。