解决Vue项目中VueX数据页面刷新数据丢失的问题

//将vuex中的数据存贮以防刷新丢失
setStore (){
     
  if (sessionStorage.getItem("store") ) {
     
  //replaceState(state: Object):替换 store 的根状态,仅用状态合并或时光旅行调试
  //Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
  	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))
 })
}

在methods中定义方法,在mounted中调用.
通过将store中的数据存贮在sessionStorage中保留数据

你可能感兴趣的:(javascript,Vue,javascript,vue.js,前端)