在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/[slug].vue,pages/index.vue

Answer 1

預設情況下，useFetch、useLazyFetch、useAsyncData 和 useLazyAsyncData 都會快取目前瀏覽器工作階段中初始取得的初始回應負載，因此不會發出無用的後續請求。 （至少，我猜這就是背後的想法）

您可以透過傳遞選項「initialCache」並將其設為「false」來變更每個提取可組合項目的預設行為。

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

Answer 2

按照上面評論中的建議，並在此處檢查文件：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/[slug].vue,app.vue

#