nuxt asyncData 中 store参数在刷新页面后会丢失的问题 有人知道吗？

Question

nuxt asyncData 中 store参数在刷新页面后会丢失的问题 有人知道吗？

Answer 1

在 Nuxt.js 中，asyncData 方法是在服务端渲染时执行的，而 store 对象是在客户端渲染时创建的。因此，在服务端渲染时，store 对象是不存在的，需要通过 context 参数传递给 asyncData 方法。

但是，在刷新页面时，Nuxt.js 会重新执行客户端渲染，此时 store 对象会重新创建，而之前在服务端渲染时创建的 store 对象会被丢失。

可以在 asyncData 方法中使用 context.store 来获取 store 对象，而不是直接使用 store 参数。这样，在服务端渲染和客户端渲染时都可以正确地获取到 store 对象。

例如：

async asyncData({ store }) {
  // 使用 context.store 获取 store 对象
  const data = await store.dispatch('fetchData')
  return { data }
}

还可以通过在 nuxt.config.js 中设置 ssr: true 来启用服务端渲染，这样可以避免在刷新页面时丢失 store 对象。