vue项目中使用vuex刷新页面出现数据丢失

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

一望红尘

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

阅读量753

点赞数

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/guzhao593/article/details/81435342

本文介绍了一种在Vue应用中使用sessionStorage实现Vuex状态持久化的策略。通过在页面加载时从sessionStorage读取状态信息，并在刷新前将Vuex状态保存回sessionStorage，确保了即使在页面刷新后，应用的状态数据依然得以保留。

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

代码来自这位老哥的文章
原因vuex数据存于内存，刷新就没了
解决思路，刷新前保存，刷新后读取

export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

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