Nuxt中替换useFetch为$fetch遇警告及报错，求解决方案

这个警告是因为你在组件挂载完成后调用了useFetch——Nuxt 规定useFetch这类组合式 API 必须在组件setup的同步阶段（挂载前）执行，挂载后调用就会触发该提示。禁用 TypeScript 没用是因为问题和 TS 无关，完全是调用时机或 API 适配的问题。

方案一：调整调用时机（优先选择） #

如果你的useApiFetch是在点击事件、异步回调、onMounted这类挂载后的钩子中调用的，把它移到组件<script setup>的顶层（初始化时自动执行），或者确保在组件挂载前的同步阶段调用。

错误示例（挂载后调用触发警告）：

<script setup>
const handleLogin = async () => {
  // 点击事件属于挂载后操作，调用useApiFetch会触发警告
  const { data } = useApiFetch('/login', { method: 'POST', body: { ... } })
}
</script>

正确示例（挂载前同步调用）：

<script setup>
// 在setup顶层直接调用，组件挂载前执行
const { data, pending } = useApiFetch('/user/info')
</script>

方案二：封装适配原结构的$fetch版本（适配挂载后调用场景） #

如果确实需要在挂载后（比如用户交互触发）发起请求，你可以封装一个基于$fetch的版本，让它返回和原useApiFetch一致的data/pending/error结构，避免大量修改原有调用代码：

修改后的useApiFetch代码：

import type { UseFetchOptions } from "nuxt/app";
import { useRequestHeaders } from "nuxt/app";

export function useApiFetch<T>(path: string, options: UseFetchOptions<T> = {}) {
  const pending = ref(false);
  const error = ref<any>(null);
  const data = ref<T | null>(null);

  const fetchData = async () => {
    pending.value = true;
    error.value = null;
    try {
      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"]),
        };
      }

      // 用$fetch替代useFetch发起请求
      data.value = await $fetch("http://localhost:8000" + path, {
        credentials: "include",
        ...options,
        headers: {
          ...headers,
          ...options?.headers,
        },
      });
    } catch (err) {
      error.value = err;
    } finally {
      pending.value = false;
    }
  };

  // 保持原useFetch的自动触发逻辑，非lazy模式下直接发起请求
  if (!options.lazy) {
    fetchData();
  }

  // 返回和原useFetch一致的结构
  return {
    data,
    pending,
    error,
    refresh: fetchData,
  };
}

挂载后调用示例（比如点击事件）：

<script setup>
// 开启lazy模式，初始化不自动请求
const { data, pending, error, refresh } = useApiFetch('/login', { 
  lazy: true,
  method: 'POST'
})

const handleLogin = async () => {
  // 手动触发请求
  await refresh()
  // 处理请求结果
  if (data.value) {
    // 登录成功逻辑
  }
}
</script>

内容的提问来源于stack exchange，提问作者Cioskki