Asyncdata & Fetch
fetch()
fetch()
hook is used when you need to 'fetch' contextual data for the store
especially for a specific page, such as search results or filtered dataset.
To continue with the example above, let's fetch all 'posts' written by a user. Let's fill the store with posts on the same dynamic route where we set the user detail using asyncData above.
// pages/_id.vue
fetch ( {store, params} ) {
console.log('fetch called')
return store.dispatch('getPosts', params.id)
}
We'll be working in store/index.js
to setup getPosts
action and a mutation to set posts for an active user of the page.
// store/index.js
state: {
...
posts: []
},
actions: {
getPosts ({ commit }, userId) {
return this.$axiosClient.getData('/posts?userId='+userId)
.then( response => {
commit('setCurrentUserPosts', response.data)
})
},
...
},
mutations: {
setCurrentUserPosts: (state, posts) => {
state.posts = posts
}
},