解决浏览器刷新vuex数据丢失问题

vuex的主要作用是组件之间的通信以及对数据进行中心化管理。

但是由于vuex中的数据是存在运行内存中的，所以当我们刷新页面的时候会导致store中的数据清空。

怎么解决这个问题呢？

我们可以使用传统的存储方式将store中的数据存起来，比如cookie、localstorage或者sessionstorage，这样刷新页面数据也不会丢失了。

只是为了保留浏览器刷新前的数据，所以我们选用sessionstorage，这样关闭浏览器，存储的数据就会被清空，不会产生重复数据。

具体实现思路是这样的，我们监听页面刷新事件，在刷新前将store中的数据存储到sessionstorge中。每次进入页面的时候先读取sessionstorage中的值并把它赋给store，这样就保留了刷新前的数据。

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

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

 

 

参考链接：https://blog.csdn.net/guzhao593/article/details/81435342