Nuxt 3 is out! Discover more about it on v3.nuxtjs.org

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 mer. 7 décembre 2022