首页 > 其他分享 > Vuex刷新页面数据会丢失吗?咋解决的?

Vuex刷新页面数据会丢失吗?咋解决的?

时间:2022-11-09 16:12:20浏览次数:49  
标签:浏览器 vuex sessionStorage Vuex 丢失 刷新 数据 页面

1、问题描述:页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。

2、解决思路:

办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie) 办法二:在页面刷新的时候再次请求远程数据,使之动态更新vuex数据 办法三:在父页面向后台请求远程数据,并且在页面刷新前将vuex的数据先保存至sessionStorage(以防请求数据量过大页面加载时拿不到返回的数据)

3、 解决过程:

3.1、选择合适的浏览器存储

3.2、解决方案

  1. 由于state里的数据是响应式,所以sessionStorage存储也要跟随变化,而且只能通过mutations来改变state中的值。 首先在用户登录成功之后,然后把用户信息,菜单信息通过actions分发保存至vuex中。然后在菜单页面计算vuex中state的菜单数据,将数据解析组装成前端组件所需的格式,然后渲染组件,生成菜单树。如果页面没有刷新,则一切正常。
  2. 监听浏览器刷新前事件,在浏览器刷新之前就把vuex里的数据保存至sessionStorage中,刷新成功后如果异步请求的数据还没返回则直接获取sessionStorage里的数据,否则获取vuex里的数据。

标签:浏览器,vuex,sessionStorage,Vuex,丢失,刷新,数据,页面
From: https://www.cnblogs.com/ltwlh/p/16874134.html

相关文章

  • 页面多查询条件必选的统一处理思路
    背景开发中我们可能会遇到会页面对应的数据表量级较大、页面查询条件过多的情况,那么有时候我们可能会限制做查询操作是必须选择至少一个查询条件。页面效果:直接查询会......
  • Vue 路由跳转后刷新页面404解决办法
    第一种解决方法:将vue路由模式mode:'history'修改为mode:'hash';//router.js文件constrouter=newRouter({//mode:'history',mode:'hash',routes:[{path:......
  • Dynamics 365 CRM CE 中 打开自定义页面 Xrm.Navigation.navigateTo Open Web Resourc
    在CRM中经常需要打开自定义的HTML界面,而且打开这个界面的时候需要模态状体,阻止用户填写除了弹窗之外的东西,只能先填写窗体的内容;这个时候很多人喜欢选择第三方的library去......
  • 第四十一章 构建数据库应用程序 - 带有CSP Search标签的CSP搜索页面
    第四十一章构建数据库应用程序-带有<CSP:Search>标签的CSP搜索页面search标记创建一个通用搜索页面,可以将其与绑定表单一起使用以执行查找操作。应用程序用户可以从......
  • 基于VUEX的公共存储器store的快速上手流程
    vuex的快速安装与使用​​store公共存储器​​​​state.js添加数据元​​​​mutations.js创建一个方法​​​​在组件中提交:​​​​在组件中使用:​​store公共存储器在使......
  • 小程序wx.navigateTo携带参数丢失问题
    问题一直在videoInfo.视频地址,我就说为啥undefined,原来是上个页面的参数传到下一个页面问号导致后面参数丢失的问题,所以获取参数就报了undefinedwx.navigateTo({......
  • vuex 刷新页面 数据不丢失的方法
    exportdefault{name:'app',//加入以下代码解决页面刷新时vueX数据丢失created(){//在页面刷新时将vuex里的信息保存到sessionStorage里window.ad......
  • 如何实现JavaSrcipt页面的跳转
    所谓的JavaSrcipt页面跳转就是利用JavaSrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过JavaSrcipt脚本就会跳转到B页面。一、常规的JS页面跳转代码1、在原来的窗体中......
  • java读取word显示在jsp页面上
    在最近的一个项目中需要将一段字符类型的文本存为word,html并要将word的内容保存在数据库中,于是就有了如下的一个工具类,希望能对碰到这样需求的朋友提供点帮助。      ......
  • vue+element ui <el-tabs>中刷新页面不要回到初始页面
    公司新加了一个需求,每个tab栏下的页面里面有查看详情的接口,查看后返回到查看前的tab页面。刚开始每次返回都返回到待处理的页面,显然不符合需求。思路:每次点击tab栏,将当前页......