Nuxt3 中的 useFetch 保持缓存数据答案

【问题标题】：useFetch in Nuxt3 keeping cached dataNuxt3 中的 useFetch 保持缓存数据
【发布时间】：2022-11-10 11:26:32
【问题描述】：

我正面临 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

【问题讨论】：

嗯，可能有这个useFetch(() => 'https://swapi.dev/api/people/${slug.value}' ) 或使用refresh 选项。不确定到底是哪一个。检查文档中的 API 以确保！

标签： vue.js nuxt.js nuxtjs3

【解决方案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

【讨论】：

我正要说谢谢，对答案的改进非常受欢迎。如果您愿意，请随时发布作为答案。

【解决方案2】：

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

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

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

【讨论】：