Looking at Nuxt's request/navigation schema (and after some debugging) I discovered that a Page component's asyncData
and fetch
methods are called after the validate
method.
Would it be possible to flip this order so that validate
is called after asyncData
and fetch
?
Here is my use case:
store
posts/_id
, I use the route param id
to fetch some data from an APIposts/_id.vue
page component's fetch
method, passing along the route param id
—something like: store.dispatch('fetchPost', route.params.id)
async fetchPost
action in the Vuex store calls my API with the payload id
, returns a post record and then that record is committed to the store
into a posts
collection/arrayid
, I will now have my post record in my Vuex store.state.posts
collectionvalidate
my dynamic Post page by finding my post record in the store's posts
collection (again using the route.params.id
)validate
is called before fetch
, my store's posts
collection will be empty so that lookup returns no record and the validation failsThe only way around this is to use the nuxtServerInit
action which does get called before a page's validate
method. However, this then means that this action will get quite cumbersome as I move or duplicate my route specific async calls to my API to within this action.
If validate
were called after fetch
then this wouldn't be necessary and the nuxtServerInit
action could remain relatively pure and simple.
Perhaps there is a reason why validate
is called before that I am not aware of—either way, I would appreciate any help/suggestions.
BTW Nuxt is literally the best thing since sliced bread. Fantastic work 🎉
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1786">#c1786</a>)</em></sub></div>