Nuxt3 中的 useFetch 保留缓存数据

Question

我在 nuxt3 中遇到以下问题。

• 动态页面

  [slug].vue

  正确加载初始slug的数据
• 当我离开页面并返回时，新数据不会加载，而是仍然显示旧数据。
• 如果我用旧数据刷新所述页面，它就可以工作。

这似乎正在发生，因为新的 slug 的 api 调用从未进行过。

我的

[slug.vue]

文件看起来像：

<script setup lang="ts">
import { ref } from 'vue';
const route = useRoute();

const slug = ref(String(route.params.slug));
console.log(slug.value);
const apicall = `https://swapi.dev/api/people/${slug.value}`;
const { data: article } = await useFetch(
  `https://swapi.dev/api/people/${slug.value}`
);
</script>
<template>
  <div>
    <NuxtLink to="/">Back to Home</NuxtLink>
    <pre>
      {{ `https://swapi.dev/api/people/${slug}` }}
      {{ route.params.slug }}
      {{ article }}
    </pre>
  </div>
</template>

整个设置可以在 stackblitz 上看到：https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue

Answer 1

按照上面评论中的建议，并在此处检查文档：https://v3.nuxtjs.org/guide/features/data-fetching/#refreshing-data我尝试了以下有效的代码

const { data: article, refresh } = await useFetch(
  `https://swapi.dev/api/people/${slug.value}`
);

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

此处的工作示例：https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,app.vue

Answer 2

默认情况下，useFetch、useLazyFetch、useAsyncData 和 useLazyAsyncData 都会缓存当前浏览器会话中初始获取的初始响应负载，因此不会发出无用的后续请求。 （至少，我猜这就是背后的想法）

您可以通过传递选项“initialCache”并将其设置为“false”来更改每个提取可组合项的默认行为。

参见：https://v3.nuxtjs.org/api/composables/use-async-data#params

Answer 3

你的 stackblitz 不起作用，给了我一个 404 页面未找到“/”。

我认为你应该尝试做的是使用 router-view 组件 并从 'vue-router' 导入 {useRoute};

因此 useRoute 更新了路由器视图，您可以访问参数，这就是我遇到问题时解决它的方法。

祝你好运

Answer 4

我在使用 queryContent 获取博客时遇到了同样的问题。以下是我通过定义一个根据您的数据而变化的唯一 ID 来解决此问题的方法。

const route = useRoute().params
const slug = ref(route.slug)

const { data: blog } = await useAsyncData(`blog:${slug.value}`, () => queryContent('/blog').find())

这里

blog:${slug.value}

是我们提供的唯一 ID。

更多信息请参阅官方docs。