解决ＶＵＥＸ刷新store消失的问题

最新推荐文章于 2024-11-05 00:19:42 发布

落叶惊雷

最新推荐文章于 2024-11-05 00:19:42 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：问题解决前端技术相关文章标签： vue

本文链接：https://blog.csdn.net/juststartnow/article/details/111477671

前端技术相关同时被 2 个专栏收录

11 篇文章

订阅专栏

问题解决

6 篇文章

订阅专栏

本文介绍了一种在Vue应用中实现Vuex状态持久化的简单方法。通过在App.vue的created()方法中添加代码，能够在页面刷新时将Vuex的状态保存到sessionStorage，并在下次加载时恢复这些状态。

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

现象，在设置好ｓｔｏｒｅ之后，刷新页面，ｓｔｏｒｅ中的内容会消失

解决在刷新前将store中的内容添加到sessionStorage,

例如，可以在App.vue的created()　方法中添加如下内容

// 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      // 存储状态
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      // session存储
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })