Let me re-iterate few points as a pretext to what i’m going to say
asyncDatacan set component level objects and access vuex storefetchcannot set component level objects but has access to vuex store- Both
asyncData&fetchwill be triggered in server side during initial load - After initial load,
asyncDataandfetchwill be triggered when the corresponding page routes are invoked
1) if your design is
- Use vuex store as a central repository
- Access data from the vuex store for the entire application
then use fetch
2) if your design is
- Use vuex store as a central repository
- Have options to set component level objects
- Data fetched in a particular route is used only by a single component
- Need flexibility to have permission to either vuex store or set component level object
then use asyncData
Can someone explain me the advantage of use these methods above the
other?
i don’t see any drawbacks in using asyncData or fetch
Choosing asyncData or fetch totally depends on your architecture
Update for NuxtJS >= 2.12
Several points mentioned in the answer no longer apply when using newer NuxtJS versions (>= 2.12). Official RFC announcement here.
A good explanation of the new behaviour and differences between asyncData and the new fetch can be found in this post in the NuxtJS official blog.
As for choosing between both, I believe the original answer still applies:
i don’t see any drawbacks in using
asyncDataorfetchChoosing
asyncDataorfetchtotally depends on your architecture