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

最新推荐文章于 2023-02-01 16:52:52 发布

原创最新推荐文章于 2023-02-01 16:52:52 发布 · 444 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

13 篇文章

订阅专栏

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

问题：

浏览器刷新时，导致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))
})