如何在Nuxt.js的Vuex store中使用异步fetch并解决首屏数据获取失败问题

• 你定义的singleAuthors action没有返回Promise实例，导致组件内await store.dispatch('api/singleAuthors', params.id)没有等待接口请求完成就结束了fetch钩子的执行。

Nuxt首屏服务端渲染时，会等待页面fetch/asyncData钩子完全执行完毕后，才会把当前Vuex的状态序列化注入到客户端的全局变量中，实现服务端与客户端的状态同步。你的写法中fetch钩子在接口返回前就已经执行结束，服务端最终序列化到客户端的store状态里singleAuthor还是初始值null。服务端渲染时可能接口刚好在页面渲染前返回，所以首次返回的HTML有数据，但客户端激活后使用的是序列化过来的null值，也不会重新触发请求，自然无法通过getter拿到数据。而页面跳转时是客户端侧执行路由逻辑，接口返回后触发mutation更新state，响应式更新页面，所以功能正常。

1. 修改api.js中的action，返回请求Promise，或直接用async/await写法保证异步逻辑执行顺序：

export const actions = {
    // 写法1：async/await 更清晰
    async singleAuthors(vuexContext,payload) {
       const response = await this.$axios.$get(`/api/author/${payload}`)
       vuexContext.commit('getSingleAuthor', response)
    }
    // 写法2：直接返回Promise
    // singleAuthors(vuexContext,payload) {
    //    return this.$axios.$get(`/api/author/${payload}`)
    //    .then(response =>{
    //        vuexContext.commit('getSingleAuthor', response)
    //    })
    // }
}

2. 额外排查点：如果你的api模块开启了命名空间，调用getter时需要加上模块前缀，否则也会拿不到值：

// 正确的命名空间getter调用方式
const author = this.$store.getters['api/callSingleAuthor']

内容的提问来源于stack exchange，提问作者Nightcrawler