createUseAsyncData

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

createUseAsyncData 创建一个带有预定义选项的自定义 useAsyncData 组合函数。生成的组合函数具有完整的类型支持,行为完全类似于 useAsyncData,但默认配置已内置。

createUseAsyncData 是一个编译器宏。它必须作为 导出 声明使用,并放置在 composables/ 目录(或 Nuxt 编译器扫描的任何目录)中。Nuxt 会在构建时自动注入去重键。

用法

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 相同的签名和返回类型,调用者可以使用或覆盖所有选项。

类型

Signature
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,
})
// 使用默认值(lazy: true,server: false)
const { data } = await useLazyData('key', () => fetchSomeData())

// 调用者覆盖 server 为 true
const { data } = await useLazyData('key', () => fetchSomeData(), { server: true })

覆盖模式(函数)

当传入的是函数时,工厂选项会覆盖调用者的选项。函数接收调用者选项作为参数:

app/composables/useStrictData.ts
// 始终强制 deep 为 false
export const useStrictData = createUseAsyncData(callerOptions => ({
  deep: false,
}))
Docs > 4 X > Guide > Recipes > Custom Usefetch 中查看详情
Docs > 4 X > API > Composables > Use Async Data 中查看详情