How to use async fetch inside Vuex store in Nuxt.js?

Question

I have this problem with Nuxt.js and Vuex store, I want to call an API from vuex module, It works if I navigate between pages, but for first-page load data renders only server and then I can't receive data into my page component using vuex getter, What i am doing wrongly?

in component

   async fetch({store, params}){
       await store.dispatch('api/singleAuthors', params.id)
    }

api.js module

export const state = () => ({
    singleAuthor:null,
})

export const mutations = {
    getSingleAuthor(state, payload) {
        state.singleAuthor = payload
    }
}

export const actions = {
    singleAuthors(vuexContext,payload) {
       this.$axios.$get(`/api/author/${payload}`)
       .then(response =>{
           vuexContext.commit('getSingleAuthor', response)
       })
    }
}

export const getters = {
    callSingleAuthor(state) {
        return state.singleAuthor
    }
}

How to use async fetch inside Vuex store in Nuxt.js?

0 Answers