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

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

在 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 对象。