浏览器刷新时，导致vue中保存的vuex清空

最新推荐文章于 2022-11-24 15:30:40 发布

摸鱼搬砖工

最新推荐文章于 2022-11-24 15:30:40 发布

阅读量430

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/csdn_zhuang/article/details/107726022

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在浏览器刷新时保持Vue应用中Vuex状态的方法。通过在main.js中添加特定代码，实现将Vuex状态保存至sessionStorage，并在刷新后恢复状态，避免了因刷新导致的数据丢失。

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

问题：

浏览器刷新时，导致vue中保存的vuex清空

解决方案

在main.js中加入以下代码：

// 刷新保存状态
if (sessionStorage.getItem('store')) {
  store.replaceState(
    Object.assign({},
      store.state,
      JSON.parse(sessionStorage.getItem('store'))
    )
  )
  sessionStorage.removeItem('store')
}

// 监听，在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('store', JSON.stringify(store.state))
})