前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vuex在页面刷新后数据被清除

vuex在页面刷新后数据被清除

原创
作者头像
wust小吴
修改2019-12-30 11:29:21
3K0
修改2019-12-30 11:29:21
举报
文章被收录于专栏:风吹杨柳

用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失

  1. 产生原因

其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。

  1. 解决思路

一种是state里的数据全部是通过请求来触发action或mutation来改变

一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中

很显然,第一种方案基本不可行,除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。

  1. 解决过程

选择合适的客户端存储

localStorage是永久存储在本地,除非你主动去删除;

sessionStorage是存储到当前页面关闭为止;

cookie则根据你设置的有效时间来存储,但缺点是不能储存大数据且不易读取。

vue是单页面应用,操作都是在一个页面跳转路由;sessionStorage可保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。

然后是怎么用sessionStorage来保存state里的数据。

第一种方案

由于state里的数据是响应式,所以sessionStorage存储也要跟随变化。又由于vuex规定所有state里数据必须通过mutation方法来修改,所以第一种方案就是mutation修改state的同时修改sessionStorage对应存储的属性

第二种方案

第一种方案确实可以解决问题,但这种方法很明显让人觉得怪异,都这样了,那不如直接用sessionStorage来做状态管理。

那怎么才能不用每次修改state时同时也要修改sessionStorage呢?因为我们是只有在刷新页面时才会丢失state里的数据,想法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面

beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢?我们总不能每个页面都监听这个事件,所以选择放在app.vue这个入口组件中,这样就可以保证每次刷新页面都可以触发。

代码语言:txt
复制
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))

    })

  }

}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档