vue项目刷新页面导致数据消失问题解决

Posted 2023-03-26

参考技术A 最近vue项目中遇到了一个比较棘手的问题: 例如第一个页面是列表,通过选中一行进入第二个页面展示选中内容的详细信息,这个时候选中的信息保存在vuex.可是这个时候就出现了一个问题,我不能在第二个页面通过浏览器刷新,否则vuex数据清空,则第二个页面将会不知道展示什么内容了,显然这一是严重的bug!  前端开发众所周知在浏览器保存数据使用session或者cookie,这当然是可行的,不过如果每一条需要存储的信息都去执行存储到session然后在通过session的数据赋值到项目对应的数据下则导致项目看起来过于臃肿了

所以通过各种百度找出来vuex的 plugins ,可以很好的解决我遇到的问题, vuex 的用法就不介绍了,请参考官方文档

以下步骤是plugins的用法

LStorage.getItem(key): 通过key可以获取sessionStorage的value

LStorage.setItem(key, val): 存储数据

LStorage.clear(): 清除所有的session记录

LStorage.removeItem(key): 删除制定的session记录

myPlugins函数里边的每次页面刷新的时候会先获取session的数据通过commit方法保存到vuex
store.subscribe方法是在关联store的commit事件,也就是只要你通过commit在修改vuex的数据这里的函数就会监听到,并且执行里边的内容保存数据到session

vuex添加plugins, myPlugins的参数可以根据自己的需要调整
好了关于这个问题就这样解决了,如果有什么不对的地方欢迎指正,献丑了O(∩_∩)O ~~

vue，下级页面刷新导致路由跳转带过来的数据消失的解决方法

if(typeof(this.$route.query.result)==‘string‘){  
  //刷新时走这
}else{
 //正常路由跳转过来后就把数据塞到 localStorage 
  let obj = JSON.stringify(this.$route.query); //转化为JSON字符串
  localStorage.setItem("prizeResult", obj); //数据存storage，防止刷新丢失
}
 去localStorage取
let result = JSON.parse(localStorage.getItem("prizeResult"));

//对自己的业务逻辑进行处理
this.showAll(result);