专栏首页风吹杨柳vuex在页面刷新后数据被清除
原创

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

用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这个入口组件中,这样就可以保证每次刷新页面都可以触发。

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))

    })

  }

}

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • angularJS学习之路(二十五)---创建服务的五大方法---provider

    那么问题来了,是否一直可以使用.factory()方法来代替.provider()方法呢?

    wust小吴
  • opencv 7 -- 边界矩形

    一个直矩形(就是没有旋转的矩形)。它不会考虑对象是否旋转。 所以边界矩形的面积不是最小的。 可以使用函数 cv2.boundingRect() 查找得...

    wust小吴
  • android布局中如何把include布局隐藏掉的方法

    wust小吴
  • Tag标签页面如何优化呢

    很多站长都不会如何制作tag页面,的ag页面使用并不恰当,甚至可能会有负效果。不过一两句话很难说清,所以单独写个帖子聊一下tag标签页面怎样SEO。

    V站CEO-西顾
  • 2016.05 第1周 群问题分享

    HTML+CSS a标签href属性的作用 2016.05.02~2016.05.06 核心概念 a标签href属性 参考答案 a标签定义超链接,用于从一个页面...

    HTML5学堂
  • 微信小程序|突出优点

    为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地...

    算法与编程之美
  • Html<a>标签href的困惑记载

    近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信...

    晚晴幽草轩轩主
  • 小程序优化36计

    本文偏技术,可能较枯燥,阅读完大概需要 15分钟 微信小程序转眼上线将近一年了,提供了接近原生App的使用体验,加上一年来不断释放新的能力,获得的关注越来越多。...

    企鹅号小编
  • Golang并发模型:轻松入门select

    select在Golang并发中扮演着重要的角色,如果你已经入门了select可以跳过这篇文章,关注下一篇文章“select进阶”。如果想看看,select是如...

    大彬
  • CVPR 2020 论文大盘点-文本图像篇

    本文盘点CVPR 2020 所有文本图像(text)相关论文,主要分为手写文本和场景文本两大方向,总计16篇,对文献进行了细致的分类,大部分论文是围绕识别问题的...

    CV君

扫码关注云+社区

领取腾讯云代金券