Page traduite Le contenu de cette page peut être déprécié.

La méthode fetch

La méthode fetch est utilisée pour remplir le store avant de render la page, c'est similaire à asyncData sauf que cela ne remplit pas le data du composant.


Nuxt >= 2.12

Avec l'arrivée de la v2.12 de Nuxt, nous avons droit à un nouveau hook disponible dans tous les composants Vue: fetch.

fetch(context) a été déprécié, à la place on peut utiliser un middleware anonyme dans la page: middleware(context)

Quand utiliser fetch?

À chaque fois que l'on a besoin d'avoir de la data asynchrone. fetch est appelé côté serveur pour render les routes et côté client lors de la navigation.

Il expose $fetchState au niveau du composant:

  • $fetchState.pending: Boolean, permet d'afficher un placeholder pendant que fetch est appelé (côté client).
  • $fetchState.error: null ou Error, vous permet d'afficher un message d'erreur
  • $fetchState.timestamp: Integer, l'horodatage du dernier fetch, utile en combinaison avec keep-alive pour de la mise en cache.

Si vous souhaitez appeler le hook fetch depuis votre template, utilisez:

<button @click="$fetch">Rafraîchir</button>

ou la méthode dans le composant:

// méthode dans la section script
export default {
  methods: {
    refresh() {
      this.$fetch()
    }
  }
}

On peut accéder au context de Nuxt à l'intérieur du hook fetch en utilisant this.$nuxt.context.

Options

  • fetchOnServer: Boolean ou Function (par défaut: true), appelle fetch() lors d'un render de page côté serveur
  • fetchDelay: Integer (défaut: 200), définit un temps d'exécution minimal en millisecondes (pour éviter les flashs)
Quand fetchOnServer est falsy (false ou retourne false), fetch sera appelé uniquement côté client et $fetchState.pending retournera true lors d'un render côté serveur du composant.
<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await this.$http.$get(
        'https://jsonplaceholder.typicode.com/posts'
      )
    },
    fetchOnServer: false
  }
</script>
Editer cette page sur GitHub Mise à jour le ven. 22 octobre 2021