如何在 Nuxt 3 中输入 useAsyncData 调用的返回值

Question

如何输入从 pinia 存储中获取一些数据的 useAsyncData 调用返回的“数据”？

<script setup lang="ts">
import { useSale } from "~/stores/sale";

const saleStore = useSale();

const { data: vehicle, pending } = useAsyncData<{ data: IVehicle }>(
  "vehicle",
  () => saleStore.getVehicle
);
</script>

目前我的 vscode 给我以下错误

No overload matches this call.
  Overload 1 of 2, '(handler: (ctx?: NuxtApp) => Promise<{ data: IVehicle; }>, options?: AsyncDataOptions<{ data: IVehicle; }, { data: IVehicle; }, KeysOf<{ data: IVehicle; }>>): AsyncData<...>', gave the following error.
  Overload 2 of 2, '(key: string, handler: (ctx?: NuxtApp) => Promise<{ data: IVehicle; }>, options?: AsyncDataOptions<{ data: IVehicle; }, { data: IVehicle; }, KeysOf<{ data: IVehicle; }>>): AsyncData<...>', gave the following error.ts(2769)
asyncData.d.ts(35, 143): The expected type comes from the return type of this signature.

更新

我尝试像评论中提到的那样输入它：

const { data: vehicle, pending } = await useAsyncData<IVehicle>(
  "vehicle",
  () => saleStore.vehicle
);

但还是报错：

No overload matches this call.
  Overload 1 of 2, '(handler: (ctx?: NuxtApp) => Promise<IVehicle>, options?: AsyncDataOptions<IVehicle, IVehicle, KeysOf<IVehicle>>): AsyncData<...>', gave the following error.
  Overload 2 of 2, '(key: string, handler: (ctx?: NuxtApp) => Promise<IVehicle>, options?: AsyncDataOptions<IVehicle, IVehicle, KeysOf<IVehicle>>): AsyncData<...>', gave the following error.ts(2769)
asyncData.d.ts(35, 143): The expected type comes from the return type of this signature.

Answer 1

此处定义的 asyncData 类型https://nuxt.com/docs/api/composables/use-async-data#type

您可以定义返回数据类型如下（useAsyncData<IVehicle>不是useAsyncData<{ data: IVehicle }>）

const { data: vehicle, pending } = useAsyncData<IVehicle>(
  "vehicle",
  () => saleStore.getVehicle
);