Nuxt.js: Is it possible to recall actions from asyncData?

Created on 25 Jan 2018 · 6Comments · Source: nuxt/nuxt.js

So, I have some axios call in asyncData, after while i would like to recall this action again, is it possible to call asyncData as a one big function again from created hook e.g.? Something like this.asyncData() ?

_{This question is available on Nuxt.js community (#c2334)}

Source

lukasborawski

Most helpful comment

This is a tricky question @lukasborawski

It is possible but kind of tricky since you need to pass the context to the asyncData method, here how you can do it:

 async mounted() {
    const data = await this.$options.asyncData(this.$root.$options.context)
    console.log('data', data)
 }

this.$root.$options.context is actually the last context given to asyncData, but keep in mind that redirect won't work for example.

PS: You don't want to call asyncData from created hook since it's run on both client-side and server-side, you want to use it on client-side only (beforeMount and mounted).

Atinux on 25 Jan 2018

👍7

All 6 comments

This is a tricky question @lukasborawski

It is possible but kind of tricky since you need to pass the context to the asyncData method, here how you can do it:

 async mounted() {
    const data = await this.$options.asyncData(this.$root.$options.context)
    console.log('data', data)
 }

this.$root.$options.context is actually the last context given to asyncData, but keep in mind that redirect won't work for example.

PS: You don't want to call asyncData from created hook since it's run on both client-side and server-side, you want to use it on client-side only (beforeMount and mounted).

Atinux on 25 Jan 2018

👍7

REALLY useful workaround @atinux 👍