Nuxt3中useLazyFetch响应变化无法被watch检测问题求助

核心原因 #

你把客户端调用的函数错误放在了server/api目录下——这个目录是Nuxt用来定义服务器端API路由的，里面的代码仅在服务器端执行，客户端无法直接导入调用。开发模式下HMR（热模块替换）的特殊机制会暂时让代码可用，但刷新页面后客户端打包时找不到该模块，直接导致请求失效、watch回调无法触发。

另外，server/api下的文件规范是用defineEventHandler定义API接口，而非导出供客户端调用的函数。

解决方案 #

方案1：将函数移至客户端可用目录（推荐）

把数据获取逻辑放到Nuxt的composables目录下（该目录下的函数会自动导入，无需手动import）：

1. 创建composables/useQuestions.ts文件：

import { questions } from "@/api";

export const useQuestions = () => {
  const config = useRuntimeConfig();
  const { pending, data, error } = useLazyFetch(`${config.public.apiBase}${questions}`);
  return { pending, data, error };
};

2. 修改组件代码：

<template>
  <NuxtLayout>
    <div v-if="pending">加载中...</div>
    <div v-else-if="error">请求失败：{{ error.message }}</div>
    <div v-else>数据：{{ d }}</div>
  </NuxtLayout>
</template>

<script setup lang="ts">
import { watch } from "vue";

const { data: d, error: e } = useQuestions();

watch(d, (n) => {
  console.log("data", n);
});
watch(e, (n) => {
  console.log("error", n);
});
</script>

方案2：通过服务器端API中转请求

如果需要在服务器端封装请求逻辑（比如隐藏敏感API密钥），可以在server/api下定义接口，再让客户端调用该接口：

1. 创建server/api/questions.ts（服务器端API路由）：

import { questions } from "@/api";
import { defineEventHandler } from "h3";

export default defineEventHandler(async () => {
  const config = useRuntimeConfig();
  const res = await fetch(`${config.apiBase}${questions}`);
  return res.json();
});

2. 客户端组件中调用该接口：

<template>
  <NuxtLayout>
    <!-- 状态展示内容 -->
  </NuxtLayout>
</template>

<script setup lang="ts">
import { watch } from "vue";

const { data: d, error: e } = useLazyFetch("/api/questions");

watch(d, (n) => console.log("data", n));
watch(e, (n) => console.log("error", n));
</script>

额外检查 #

确保nuxt.config.ts中正确配置了runtimeConfig：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: "https://你的实际API地址/"
    }
  }
});

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