Menggunakan useFetch untuk mengekalkan data cache dalam Nuxt3

Question

Saya menghadapi masalah berikut semasa menggunakan nuxt3.

• Halaman dinamik[slug].vueMemuatkan data slug awal dengan betul
• Apabila saya meninggalkan halaman dan kembali, data baharu tidak dimuatkan tetapi data lama masih muncul.
• Jika saya memuat semula halaman tersebut dengan data lama ia berfungsi dengan baik.

Ini nampaknya berlaku kerana panggilan api kepada slug baru tidak pernah dibuat.

Fail [slug.vue] saya kelihatan seperti ini:

<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>

Seluruh persediaan boleh dilihat pada stackblitz: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue

Answer 1

Secara lalai, useFetch, useLazyFetch, useAsyncData dan useLazyAsyncData kesemuanya cache muatan respons awal yang mula-mula diambil dalam sesi penyemak imbas semasa, jadi tiada permintaan berikutnya yang tidak berguna dibuat. (Sekurang-kurangnya, saya rasa itulah idea di sebaliknya)

Anda boleh menukar gelagat lalai setiap kompos yang diambil dengan menghantar pilihan "initialCache" dan menetapkannya kepada "false".

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

Answer 2

Ikuti nasihat dalam ulasan di atas dan semak dokumentasi di sini: https://v3.nuxtjs.org/guide/features/data-fetching/#refreshing-dataSaya mencuba kod berikut yang berkesan

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

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

Contoh berfungsi di sini: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,app.vue