Utiliser useFetch pour conserver les données mises en cache dans Nuxt3

Question

J'ai rencontré le problème suivant lors de l'utilisation de nuxt3.

• Page dynamique[slug].vueCharge correctement les données du slug initial
• Lorsque je quitte la page et reviens, les nouvelles données ne se chargent pas mais les anciennes données s'affichent toujours.
• Si j'actualise ladite page avec d'anciennes données, cela fonctionne bien.

Cela semble se produire car l'appel API au nouveau slug n'est jamais effectué.

Mon [slug.vue]fichier ressemble à ceci :

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

L'intégralité de la configuration peut être vue sur stackblitz : https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue

Answer 1

Par défaut, useFetch, useLazyFetch, useAsyncData et useLazyAsyncData mettent tous en cache la charge utile de réponse initiale initialement récupérée dans la session de navigateur en cours, donc aucune requête ultérieure inutile n'est effectuée. (Du moins, je suppose que c'est l'idée derrière tout ça)

Vous pouvez modifier le comportement par défaut de chaque composable récupéré en passant l'option "initialCache" et en la définissant sur "false".

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

Answer 2

Suivez les conseils dans les commentaires ci-dessus et consultez la documentation ici : https://v3.nuxtjs.org/guide/features/data-fetching/#refreshing-dataJ'ai essayé le code suivant qui a fonctionné

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

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

Exemple de travail ici : https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,app.vue