vuex页面刷新数据丢失解决方法详解

 更新时间:2023年07月14日 09:35:09   作者:醉前端  
这篇文章主要为大家介绍了vuex页面刷新数据丢失解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

原因

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

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

解决思路

将state的数据保存在localstorage、sessionstorage或cookie中(三者的区别),这样即可保证页面刷新数据不丢失且易于读取。

  • localStorage: localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。
  • sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。
  • cookie:cookie生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制(各浏览器不同),一般不能超过20个。缺点是不能储存大数据且不易读取。

由于vue是单页面应用,操作都是在一个页面跳转路由,因此sessionStorage较为合适,原因如下:

  • sessionStorage可以保证打开页面时sessionStorage的数据为空;
  • 每次打开页面localStorage存储着上一次打开页面的数据,因此需要清空之前的数据。

vuex中state数据的修改必须通过mutation方法进行修改,因此mutation修改state的同时需要修改sessionstorage,问题倒是可以解决但是感觉很麻烦,state中有很多数据,很多mutation修改state就要很多次sessionstorage进行修改,既然如此直接用sessionstorage解决不就行了,为何还要用vuex多此一举呢?
vuex的数据在每次页面刷新时丢失,是否可以在页面刷新前再将数据存储到sessionstorage中呢,是可以的,beforeunload事件可以在页面刷新前触发,但是在每个页面中监听beforeunload事件感觉也不太合适,那么最好的监听该事件的地方就在app.vue中。

  • 在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态
  • 在beforeunload方法中将store.state存储到sessionstorage中。

代码如下

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

以上就是vuex页面刷新数据丢失解决方法详解的详细内容,更多关于vuex页面刷新数据丢失解决的资料请关注脚本之家其它相关文章!

相关文章

  • 解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx

    解决Vue3.0刷新页面警告[Vue Router warn]:No match 

    这篇文章主要介绍了解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • VUE跳转外部链接与网页的方法示例

    VUE跳转外部链接与网页的方法示例

    这篇文章主要给大家介绍了关于VUE跳转外部链接与网页的方法,记录一下在vue项目中如何实现跳转到一个新页面,需要的朋友可以参考下
    2023-06-06
  • Vue代理报错404问题及解决(vue配置proxy)

    Vue代理报错404问题及解决(vue配置proxy)

    这篇文章主要介绍了Vue代理报错404问题及解决(vue配置proxy),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue实现页面刷新跳转到当前页面功能

    Vue实现页面刷新跳转到当前页面功能

    在Vue.js应用开发中,有时候我们需要实现页面的刷新或跳转到当前页面的功能,这种需求在某些特定场景下非常有用,本文将详细介绍如何在Vue中实现页面刷新和跳转到当前页面的功能,并提供多个示例和使用技巧,需要的朋友可以参考下
    2024-10-10
  • 基于Vue实现卡片无限滚动动画

    基于Vue实现卡片无限滚动动画

    这篇文章主要为大家详细介绍了如何利用Vue制作出卡片无限滚动动画,文中的示例代码讲解详细,对我们学习有一定帮助,需要的可以参考一下
    2022-05-05
  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • Vue的事件响应式进度条组件实例详解

    Vue的事件响应式进度条组件实例详解

    这篇文章主要介绍了Vue的事件响应式进度条组件的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • Vue-resource安装过程及使用方法解析

    Vue-resource安装过程及使用方法解析

    这篇文章主要介绍了Vue-resource安装过程及使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Vue.js第三天学习笔记(计算属性computed)

    Vue.js第三天学习笔记(计算属性computed)

    这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记,vue.js计算属性computed,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue再次进入页面不会再次调用接口请求问题

    vue再次进入页面不会再次调用接口请求问题

    这篇文章主要介绍了vue再次进入页面不会再次调用接口请求问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论