---
title: "createUseAsyncData"
description: "创建一个自定义的 useAsyncData 可组合项工厂函数，并预设默认选项。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/composables/create-use-async-data"
---
# createUseAsyncData

> 创建一个自定义的 useAsyncData 可组合项工厂函数，并预设默认选项。

`createUseAsyncData` 会创建一个带有预定义选项的自定义 [`useAsyncData`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-async-data) 可组合项。生成的可组合项具有完整的类型，并且与 `useAsyncData` 的工作方式完全相同，只是预先设置了默认值。

<note>

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

</note>

## 用法

```ts [app/composables/useCachedData.ts]
export const useCachedData = createUseAsyncData({
  getCachedData (key, nuxtApp) {
    return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key]
  },
})
```

```vue [app/pages/index.vue]
<script setup lang="ts">
const { data: mountains } = await useCachedData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains'),
)
</script>
```

生成的可组合项与 [`useAsyncData`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-async-data) 具有相同的签名和返回类型，调用者可以使用或覆盖所有选项。

## 类型

```ts [Signature]
function createUseAsyncData (
  options?: Partial<AsyncDataOptions>,
): typeof useAsyncData

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

## 选项

`createUseAsyncData` 接受与 [`useAsyncData`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-async-data#parameters) 相同的所有选项，包括 `server`、`lazy`、`immediate`、`default`、`transform`、`pick`、`getCachedData`、`deep`、`dedupe`、`timeout` 和 `watch`。

请参阅 [`useAsyncData` 文档](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-async-data#parameters)中的完整选项列表。

## 默认模式 vs 覆盖模式

### 默认模式（纯对象）

当你传入一个纯对象时，工厂选项充当**默认值**。调用者可以覆盖任意选项：

```ts [app/composables/useLazyData.ts]
export const useLazyData = createUseAsyncData({
  lazy: true,
  server: false,
})
```

```ts
// 使用默认值（lazy: true, server: false）
const { data } = await useLazyData('key', () => fetchSomeData())

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

### 覆盖模式（函数）

当你传入一个函数时，工厂选项会**覆盖**调用者的选项。该函数会接收调用者的选项作为参数：

```ts [app/composables/useStrictData.ts]
// deep 永远被强制为 false
export const useStrictData = createUseAsyncData(callerOptions => ({
  deep: false,
}))
```

<read-more to="https://nuxt.zhcndoc.com/docs/4.x/guide/recipes/custom-usefetch">



</read-more>

<read-more to="https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-async-data">



</read-more>

---

- [Source](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/asyncData.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.