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