Nuxt 网站在刷新使用 useFetch 的页面时显示旧数据

Question

我有一个 Nuxt 网站。我有一个服务器端点来获取内容。首次加载页面时，会显示当前数据。如果我刷新页面，则不会调用 useFetch （基于网络日志）并显示旧数据。旧数据似乎是部署时存在的数据。 以下是其中一页的代码：

<template>
    <div>
        <menu-item v-for="item in items" :title="item.title" :content="item.content" />
    </div>
</template>

<script setup lang="ts">
const { data: res } = await useFetch(
    "https://getcontent-***-uc.a.run.app/",
    {
        method: "GET",
        query: {
            websiteId: "***",
            contentGroupId: "***",
        },
    }
);
const items = (res.value as any).data;
</script>

Answer 1

根据 Nuxt 你要么：

• 更新您的 nuxt 版本，因为此问题已在较新的 nuxt 版本上解决 问题链接

或

• 您可以添加此解决方法

  watchEffect(() => {
    refresh();
  });
  

Answer 2

尝试每次在

key

的选项对象中添加一个具有唯一值的

useFetch

值（例如基于

Date.now()

）。这就是帮助我解决类似问题的原因。否则，

useFetch

倾向于缓存数据，并且当它认为是相同的 API 调用时不会重新获取。