useFetch在Nuxt3保存缓存数据中的应用
我正面临着nuxt3的以下问题。
- 动态页面
[slug].vue正确加载初始段塞的数据，当我离开页面返回时，新数据没有加载，而是仍然显示旧数据。 - ，如果我用旧数据刷新该页面，它可以正常工作。
这似乎发生了，因为新的弹头的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 at：https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue上看到。
回答 3
Stack Overflow用户
发布于 2022-09-09 11:21:06
正如上面的注释中所建议的，并在这里查看文档：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
Stack Overflow用户
发布于 2022-10-28 02:41:47
默认情况下，useFetch、useLazyFetch、useAsyncData和useLazyAsyncData都缓存当前浏览器会话中初始获取的初始响应有效负载，因此不会发出无用的后续请求。(至少，我猜这就是背后的想法)
您可以通过传递选项‘initialCache’并将其设置为‘false’来更改每个fetch可组合的默认行为。
请参阅：https://v3.nuxtjs.org/api/composables/use-async-data#params
Stack Overflow用户
发布于 2022-11-22 10:12:28
您的stackblitz没有工作，给了我404页没有找到'/‘。
我认为您应该尝试使用路由器视图组件并从‘vue-路由器’导入{useRoute}；
因此，useRoute更新路由器视图，您可以访问params，这就是我遇到问题时为我解决的原因。
祝好运
https://stackoverflow.com/questions/73656407
复制相似问题
腾讯云开发者
