在 Nuxt 中努力使用 $fetch 而不是 usefetch :

Question

这是我用于身份验证前端的代码，但是两天前出现了以下错误，我问自己如何修复该警告......但我不知道如何解决它。

警告：

[nuxt] [useFetch] 组件已经挂载，请使用 $fetch 代替。请参阅https://nuxt.com/docs/getting-started/data-fetching**

我的代码：

import type { UseFetchOptions } from "nuxt/app";
 
import { useRequestHeaders } from "nuxt/app";
 
export function useApiFetch<T>(path: string, options: UseFetchOptions<T> = {}) {
    let headers: any = {
        accept: "application/json",
        referer: "http://localhost:3000",
    };
 
    const token = useCookie("XSRF-TOKEN");
 
    if (token.value) {
        headers["X-XSRF-TOKEN"] = token.value as string;
    }
 
    if (process.server) {
        headers = {
            ...headers,
 
            ...useRequestHeaders(["cookie"]),
        };
    }
 
    return useFetch("http://localhost:8000" + path, {
        credentials: "include",
 
        watch: false,
 
        ...options,
 
        headers: {
            ...headers,
 
            ...options?.headers,
        },
    });
}

我尝试禁用 TypeScript，最终我尝试实现

$fetch

，但在返回对象中我有很多错误。

Answer 1

<script setup lang="ts">
import { useApiFetch } from '~/file'
const { data, pending, error, execute } = useApiFetch(
  '/api/path'
)
const doFetch = async () => {
  await execute()
}
</script>

看到这个：https://www.youtube.com/watch?v=njsGVmcWviY&ab_channel=AlexanderLichter