Nuxt3从Directus获取数据时路由切换返回首页后数据丢失的问题求助

大家好，我是刚接触Nuxt的新手，现在想做一个用Directus做后端的站点。我跟着教程学了Nuxt里的数据获取和Directus SDK的使用，初次加载页面的时候一切正常，数据也能正确获取到，但当我切换路由再回到index.vue的时候，数据就丢失了，不会重新获取，页面也没法正常渲染。

我现在遇到的错误是H3Error: Failed to fetch，而且global.value变成了null。我知道在原生Vue里该怎么处理，但Nuxt里我肯定哪里弄错了？会不会是我没搞懂Nuxt的生命周期钩子？我觉得问题不在Directus那边，应该是Nuxt的数据获取、缓存或者生命周期相关的问题。

我的代码如下：

插件文件：plugins/directus.js #

import { createDirectus, rest, readItems} from '@directus/sdk';
const directus = createDirectus('https://foo.bar').with(rest())

export default defineNuxtPlugin(() => {
    return {
        provide: { directus, readItems},
    };
});

首页文件：pages/index.vue #

<script setup>
const { $directus, $readItems } = useNuxtApp();

const { data: global } = await useAsyncData('global', async () => {
    const response = await $directus.request($readItems('global'));
    return response;
});

console.log(global);
</script>
<template>
  <div class="flex px-5 bg-base-100 mt-9 sm:mt-0">
    <p class="text-2xl">
        bla bla bla
           <NuxtLink to="/about">
             {{ global.name }}
           </NuxtLink>
         {{ global.about }}
    </p>
   </div>
</template>

可能的问题排查与解决方案 #

我帮你梳理几个常见的排查方向，你可以逐一试试：

1. 调整useAsyncData的缓存策略
   你给useAsyncData设置了唯一标识'global'，Nuxt默认会缓存这个标识对应的数据。如果缓存的数据因为请求失败等原因失效，返回首页时就会直接用失效的null数据。可以尝试禁用缓存或设置过期时间：

   const { data: global } = await useAsyncData('global', async () => {
       const response = await $directus.request($readItems('global'));
       return response;
   }, {
       // 禁用缓存，每次进入页面都重新请求
       cache: false,
       // 或者设置缓存有效期，比如5分钟
       maxAge: 300000
   });
   

2. 检查Directus实例的复用问题
   插件里创建的全局Directus实例可能在路由切换后出现状态异常（比如认证会话过期）。可以试试在页面内直接创建实例，避免全局复用的潜在问题：

   // 在index.vue的script里直接创建实例
   import { createDirectus, rest, readItems } from '@directus/sdk';
   const directus = createDirectus('https://foo.bar').with(rest());
   
   const { data: global } = await useAsyncData('global', async () => {
       const response = await directus.request(readItems('global'));
       return response;
   });
   

3. 添加错误捕获与状态处理
   你的请求逻辑里没有错误捕获，一旦请求失败，data会直接变成null，也没有重试机制。可以加上错误处理，同时监控加载状态：

   const { data: global, error, pending } = await useAsyncData('global', async () => {
       try {
           const response = await $directus.request($readItems('global'));
           return response;
       } catch (err) {
           console.error('获取Directus数据失败:', err);
           // 抛出错误让Nuxt处理，或返回默认值避免页面崩溃
           throw err;
       }
   });
   

   这样你能看到更具体的错误信息，而不是只看到模糊的H3Error。

4. 验证Nuxt的渲染模式与CORS配置
   如果你用的是客户端渲染模式，可能存在跨域问题（虽然初次加载正常，但路由切换后的客户端请求可能触发CORS限制）。可以检查Directus后台的CORS设置，确保允许你的Nuxt站点域名访问；也可以在nuxt.config.ts里确认ssr: true，确保服务端渲染时的请求不会受客户端CORS限制。

另外，你可以在console.log(global)后面加上console.log(error)，看看错误的详细信息，这会帮你更快定位问题根源。

备注：内容来源于stack exchange，提问作者Ludwig Loth