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
ouError
, vous permet d'afficher un message d'erreur -
$fetchState.timestamp
:Integer
, l'horodatage du dernier fetch, utile en combinaison aveckeep-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
ouFunction
(par défaut:true
), appellefetch()
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)
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>
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)