createUseAsyncData

源文件
一个用于创建带有预定义默认选项的自定义 useAsyncData 组合式函数的工厂函数。

createUseAsyncData 可以创建一个带有预定义选项的自定义 useAsyncData 组合式函数。生成的组合式函数具有完整的类型定义,其工作方式与 useAsyncData 完全一致,但内置了您的默认配置。

createUseAsyncData 是一个编译器宏。它必须作为 composables/ 目录(或任何被 Nuxt 编译器扫描的目录)中的 **导出 (exported)** 声明来使用。Nuxt 会在构建时自动注入去重键 (de-duplication keys)。

使用

app/composables/useCachedData.ts
export const useCachedData = createUseAsyncData({
  getCachedData (key, nuxtApp) {
    return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key]
  },
})
app/pages/index.vue
<script setup lang="ts">
const { data: mountains } = await useCachedData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains'),
)
</script>

生成的组合式函数与 useAsyncData 具有相同的签名和返回类型,调用者可以使用或覆盖所有可用选项。

类型

签名
function createUseAsyncData (
  options?: Partial<AsyncDataOptions>,
): typeof useAsyncData

function createUseAsyncData (
  options: (callerOptions: AsyncDataOptions) => Partial<AsyncDataOptions>,
): typeof useAsyncData

选项

createUseAsyncData 接受与 useAsyncData 完全相同的选项,包括 serverlazyimmediatedefaulttransformpickgetCachedDatadeepdedupetimeoutwatch

请参阅 useAsyncData 文档以获取完整的选项列表。

默认模式与覆盖模式

默认模式(普通对象)

当您传入一个普通对象时,工厂选项将作为**默认值**。调用者可以覆盖任何选项。

app/composables/useLazyData.ts
export const useLazyData = createUseAsyncData({
  lazy: true,
  server: false,
})
// Uses the defaults (lazy: true, server: false)
const { data } = await useLazyData('key', () => fetchSomeData())

// Caller overrides server to true
const { data } = await useLazyData('key', () => fetchSomeData(), { server: true })

覆盖模式(函数)

当您传入一个函数时,工厂选项会**覆盖**调用者的选项。该函数将接收调用者的选项作为其参数。

app/composables/useStrictData.ts
// deep is always enforced as false
export const useStrictData = createUseAsyncData(callerOptions => ({
  deep: false,
}))
阅读更多内容:文档 > 4.x > 指南 > 配方 > 自定义 Usefetch
阅读更多内容:文档 > 4.x > API > 组合式函数 > Use Async Data