刷新页面时候将state数据保存到localStorage里面:

export default {
name: 'App',
created () {
//在页面加载时读取localStorage里的状态信息
if (localStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
} //在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}

24、vuex刷新页面数据丢失解决办法的更多相关文章

  1. 解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据

    何为Vuex?用处是什么?为什么刷新丢失? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...

  2. 解决vuex刷新页面数据丢失

    1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...

  3. js form表单提交后如何可以不刷新页面 的解决办法

    表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 &l ...

  4. firefox快速刷新error及解决办法

    问题: 测试发过来bug,说——频繁F5刷新页面,会闪现未加载完样式的页面:    开发用的Chrome,没发现这个问题,测试用的firefox,于是从浏览器的刷新加载机制方面搜索解决办法,没搜到,运 ...

  5. vue项目打包之后页面空白解决办法

    之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...

  6. 前端跳转处理--房天下的访问页面部分ip自动跳转到登录页面的解决办法(xjl456852原创)

    朋友说自己在访问房天下的页面时,他们页面进行了跳转,跳转到登录页面,说是前端跳转.让我也看看,我看我的机器没有进行跳转. 后来就发现有的机器在访问页面会自动跳转到登录页面.有的不会进行跳转. 比如访问 ...

  7. position:fixed 造成页面抖动解决办法

    今天做项目遇到一个问题.鼠标滚动到指定长度后,理想状况是菜单吸附到顶部.但是实际上在一些页面上会造成抖动.定位之后发现.window.pageYoffset值会变成0 搜索一些资料后发现.因为fixe ...

  8. javascript刷新页面的集中办法

    1. history.go(0) 2. location.reload() 3. location=location 4. location.assign(location) 5. document. ...

  9. glxgears刷新只有60FPS解决办法

    问题原因在于屏幕的垂直同步刷新率的限制,解决办法是关闭垂直同步刷新. 编辑~/.drirc <driconf> <device screen=" driver=" ...

随机推荐

  1. 前端页面模拟浏览器搜索功能Ctrl+F实现

    <html> <head> <style type="text/css"> .res { color: Red; } .result{ back ...

  2. mybatis框架的分页功能

    需求说明:为用户管理之查询用户列表功能增加分页实现      列表结果按照创建时间降序排列 /** * 需求说明:为用户管理之查询用户列表功能增加分页实现 列表结果按照创建时间降序排列 * @para ...

  3. 每天一道Rust-LeetCode(2019-06-03)

    每天一道Rust-LeetCode(2019-06-02) 有序链表转换二叉搜索树 坚持每天一道题,刷题学习Rust. 原题 题目描述 给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜 ...

  4. 【Tomcat】系统找不到指定的路径

    确认一下端口防火墙是否开放 没开放就开一下:firewall-cmd --zone=public --add-port=9080/tcp --permanent 然后重启: firewall-cmd ...

  5. uniapp增加百度统计代码(h5)

    做了个微信公众号文章互相阅读的h5界面,http://mptask.wintp.top/(只能微信浏览器打开),其中用到了统计代码,记录如下. 1.新建 tj.html 界面 可放置在项目的根目录,文 ...

  6. Chrome插件中 popup,background,contentscript消息传递机制

    https://blog.csdn.net/summerxiachen/article/details/78698878 popup不能接收到contentscript 发送的消息, 如果这时cont ...

  7. 什么是ES5?js中的'use strict'是什么?目的是什么?

    什么是ES5? ECMA Script5:ECMA(欧洲计算机制造联合会)的第五次改版,2009年. js中的'use strict'是什么? js的严格模式 目的: ①添加更多报错的场合,消除代码的 ...

  8. [Gamma] 项目展示

    [Gamma] 项目展示 一.工程展示 1.项目简介 定位分析 我们的目标是做一个创意分享网站,在之前的阶段中完成了大框架的搭建,并以此为基础进行界面优化与功能扩展. 典型用户 用户 面临困境 需求功 ...

  9. html页面添加左侧滑动菜单与内容部分的滚动条

    html + css + jquery 展示地址:https://migloo.gitee.io/front  或 https://www.igloo.xin/front 思路: 1.通过jquery ...

  10. Struts2利用iText导出word文档(包含表格)以提供下载

    J2EE ExcelStrutsXML  在公司实习期间,带我的老师让我实现一功能——在显示课表的页面上上点击“导出文件“时能以word文档形式下载课表.将课表导出到excel里的功能他们已经实现了, ...