vue.js - 如何在 Nuxt.js 的 Vuex 存储中使用异步获取？

Question

我对 Nuxt.js 和 Vuex 商店有这个问题，我想从 vuex 模块调用一个 API，如果我在页面之间导航它就可以工作，但是对于第一页加载数据只呈现服务器，然后我无法将数据接收到我的使用 vuex getter 的页面组件，我做错了什么？

在组件中

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

api.js 模块

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
    }
}

标签： vue.jsnuxt.js