nuxt中刷新页面后防止store值丢失

慕水渔

于 2020-09-30 15:39:07 发布

阅读量1.2k

点赞数 1

分类专栏： nuxt

本文链接：https://blog.youkuaiyun.com/qq_41293573/article/details/108886233

版权

nuxt 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中配置插件以实现在客户端进行页面离开前的Store数据缓存，并在页面加载完成后恢复状态。通过监听'beforeunload'和'load'事件，利用sessionStorage保存和恢复Vuex Store的状态，确保页面刷新后仍能保持用户交互数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、配置插件（）

plugins: [
    {src:'~/plugins/storeCache',ssr: false},
]

注意：要禁止服务端运行，不然会报错，这个事件是在客户端添加的，不是在服务端小渲染的时候添加的。

2 、在plugins/storeCache.js

写代码，如下。

export default function(ctx){
    //离开页面 刷新前 将store中的数据存到session
    window.addEventListener('beforeunload', ()=> {
        sessionStorage.setItem("storeCache",JSON.stringify(ctx.store.state))
    });
    //页面加载完成  将session中的store数据
    window.addEventListener('load', ()=> {
        let storeCache = sessionStorage.getItem("storeCache")
        if(storeCache){
            // 将session中的store数据替换到store中
            ctx.store.replaceState(JSON.parse(storeCache));
        }
    });
}