最近接手了一个项目,前端后端都要做,之前一直在做服务端的语言、框架和环境,前端啥都不会啊。

突然需要前端编程,两天速成了JS和VUE框架,可惜还是个半吊子。然后遇到了一个困扰了一整天的问题。一直调试都没办法解决。

最后找到一个极好的解决思路解决了问题。https://blog.csdn.net/guzhao593/article/details/81435342

遇到的问题:

由于vue框架设计出来的APP实际上全部设置在同一个html上,跳转是通过路由实现的,

所以,有的控件并不会在跳转时刷新,如果有数据存放在session中,没办法保证没有刷新的控件能及时更新属性值。除非手动F5。

vuex的的作用就是设置一个store,来管理这些需要动态更新的数据。

控件通过computed的绑定,可以保证在store中的数据更新后,控件上对应的数据及时更新。

但是,store的数据是保存在内存中的,当手动F5时,页面会重新加载vue实例,store的数据就全部恢复初始值了,这样就会出现数据丢失的问题。

解决思路:

将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中,刷新后重新从本地存储中读取出来,恢复现场。

解决过程:
首先得选择合适的客户端存储

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

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

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

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

因为我们是只有在刷新页面时才会丢失store里的数据,那我们可以在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面。

beforeunload这个事件在页面刷新时先触发的。我们把这个事件放在app.vue这个入口组件中,这样就可以保证每次刷新页面都可以触发。

具体的代码如下:

created() {
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));
});
}

前端 vue单页面应用刷新网页后vuex的state数据丢失的解决方案(转载)的更多相关文章

  1. vue单页面应用刷新网页后vuex的state数据丢失的解决方案

    1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值. 2. 解决思路一种是state里的数据全部是通过请求 ...

  2. vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

    最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: exp ...

  3. vue单页面应用刷新网页后vuex的state数据丢失的解决办法

    第一种方案 首先将数据保存在vuex的store中,同时将这些信息也保存在sessionStorage中.这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vue ...

  4. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  5. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  6. 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  7. vue单页面应用打包后相对路径、绝对路径相关问题

    原文链接:  vue单页面应用打包后相对路径.绝对路径相关问题展开       在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过web ...

  8. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  9. Vue单页面应用阻止浏览器记住密码

    Vue单页面应用阻止浏览器记住密码 ——IT唐伯虎 摘要: Vue单页面应用阻止浏览器记住密码. 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录: 登录完成后 ...

随机推荐

  1. django 后端开发-01 配置工作:

    # Django 配置工作 1: 配置好数据库 2: 配置好模板文件路径 3: 配置好静态文件路径 4: 配置好时区 5: 配置好模板的static标签 1:  配置好数据库 1.1 配置django ...

  2. 02 Node.js学习笔记之http服务

    在Node中可以非常轻松的构建一个Web服务器,在Node中提供了一个http模块,这个模块主要功能就是帮助你创建一个Web服务器. 创建步骤: //1.加载http模块 var http=requi ...

  3. ESP8266开发之旅 进阶篇② 闲聊Arduino IDE For ESP8266烧录配置

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  4. Mysql分表的一个考虑

    今天看到一篇博客,讲述的是Mysql的分表方案,内容比较简单,不过有个思路倒是挺好的,记录下,后续分表可以参考 作者主要是说到两种分表,一个是取模,另一个是范围分表 取模:比如用户ID%10,分10张 ...

  5. 在Mac平台用Sublime编辑器使用Git并连接github

    近期闲来无事,学习一下Git版本控制的东西,首先是要在我的pc上学会如何向git上提交我的代码,记录一下过程以及遇到的问题. 一.Mac下Sublime Text 3整合Git 来源于一个技术教程:h ...

  6. beanfactory中单例bean的初始化过程(一)

    Date 10.06 pm Point 完成beanfactory中单例bean的初始化 beanFactory.preInstantiateSingletons() 拿到所有的bean定义信息(在 ...

  7. 解决 Mybatis报错org.apache.ibatis.ognl.NoSuchPropertyException: XXXCriteria$Criterion.noValue

    问题 这个noValue一定存在,但是报错. 场景就是存在并发的情况下,尤其是在服务刚刚启动的时候,就会发生这个异常. 但是很不幸,mybatis 3.4.1之前,用的 OGNL都是由这个问题. 分析 ...

  8. Catalan数的理解

    Catalan数的理解 f(0)=1 f(1)=1 f(2)=2 f(3)=5 f(4)=14 f(5)=42     f(2)=f(1)+f(1)   f(3)=f(2)+f(1)*f(1)*f(2 ...

  9. Django的下载与基本命令

    1.下载Django: pip3 install django==2.1.2 2.创建一个django project django-admin startproject 项目名称 3.在项目目录下创 ...

  10. 在虚拟机上的关于FTP FTP访问模式(虚拟用户模式)

    首先你要有vsftpd服务 可以先去yum中下载(当然你要有本地yum仓库) 输入命令: yum  install  vsftpd 下载完成之后打开vsftpd服务 输入命令:systemctl   ...