How can I display the retrieved 'data' from a useAsyncData function that fetches information from a pinia store?
<script setup lang="ts">
import { useSale } from "~/stores/sale";
const saleStore = useSale();
const { data: vehicle, pending } = useAsyncData<{ data: IVehicle }>(
"vehicle",
() => saleStore.getVehicle
);
</script>
Currently, I am encountering an error in 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.
Update
I attempted to specify a type as mentioned in the comments:
const { data: vehicle, pending } = await useAsyncData<IVehicle>(
"vehicle",
() => saleStore.vehicle
);
However, the error persists:
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.