vue 打开页面自动获取数据_vue项目刷新页面导致数据消失问题解决

最近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 ~~