24、vuex刷新页面数据丢失解决办法
刷新页面时候将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刷新页面数据丢失解决办法的更多相关文章
- 解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据
何为Vuex?用处是什么?为什么刷新丢失? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...
- 解决vuex刷新页面数据丢失
1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...
- js form表单提交后如何可以不刷新页面 的解决办法
表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 &l ...
- firefox快速刷新error及解决办法
问题: 测试发过来bug,说——频繁F5刷新页面,会闪现未加载完样式的页面: 开发用的Chrome,没发现这个问题,测试用的firefox,于是从浏览器的刷新加载机制方面搜索解决办法,没搜到,运 ...
- vue项目打包之后页面空白解决办法
之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...
- 前端跳转处理--房天下的访问页面部分ip自动跳转到登录页面的解决办法(xjl456852原创)
朋友说自己在访问房天下的页面时,他们页面进行了跳转,跳转到登录页面,说是前端跳转.让我也看看,我看我的机器没有进行跳转. 后来就发现有的机器在访问页面会自动跳转到登录页面.有的不会进行跳转. 比如访问 ...
- position:fixed 造成页面抖动解决办法
今天做项目遇到一个问题.鼠标滚动到指定长度后,理想状况是菜单吸附到顶部.但是实际上在一些页面上会造成抖动.定位之后发现.window.pageYoffset值会变成0 搜索一些资料后发现.因为fixe ...
- javascript刷新页面的集中办法
1. history.go(0) 2. location.reload() 3. location=location 4. location.assign(location) 5. document. ...
- glxgears刷新只有60FPS解决办法
问题原因在于屏幕的垂直同步刷新率的限制,解决办法是关闭垂直同步刷新. 编辑~/.drirc <driconf> <device screen=" driver=" ...
随机推荐
- Tomcat8 访问 manager App 失败
Tomcat8 访问 manager App 失败 进入 tomcat 8 的下面路径 修改 上面 的 context.xml 注释了下面的框框 保存退出.重启tomcat
- hdu 6217 A BBP Formula 公式题
题意 已知公式:$\pi=\sum_{k=0}^{\infty}\left[\frac{1}{16^{k}}\left(\frac{4}{8 k+1}-\frac{2}{8 k+4}-\frac{1} ...
- .Net反射-基础2-BindingFlags参数
BindingFlags参数用于指定反射查找的范围在调用下列方法时会用到BindingFlags参数 // 调用方法. InvokeMethod // 创建实例. CreateInstance // ...
- MySQL 五大引擎之间的区别和优劣之分
MySQL五大引擎介绍: MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型INNODB和BERKLEY(BDB) ISAM:ISAM是一个定义明确且历经时间考验的数据表格管理方 ...
- NOIP2013-2014提高组题目浅析
1.前言 迎接NOIP的到来...在这段闲暇时间,决定刷刷水题.这里只是作非常简单的一些总结. 2.NOIP2014 <1> 生活大爆炸之石头剪刀布(模拟) 这是一道考你会不会编程的题目. ...
- TCP/IP协议总结
TCP/IP网络协议栈分为四层, 从下至上依次是: 链路层 其实在链路层下面还有物理层, 指的是电信号的传输方式, 比如常见的双绞线网线, 光纤, 以及早期的同轴电缆等, 物理层的设计决定了电信号传输 ...
- js 将图片转换为 base64
var img = document.getElementById('s_lg_img'); function getBase64Image(img) { var canvas = document. ...
- 网络协议 7 - UDP 协议
网络协议五步登天路,我们一路迈过了物理层.链路层,今天终于到了传输层.从这一层开始,很多知识应该都是服务端开发必备的知识了,今天我们就一起来梳理下. 其实,讲到 UDP,就少不了 TCP.这俩 ...
- 洛谷P2704 [NOI2001]炮兵阵地题解
题目描述 司令部的将军们打算在\(N * M\)的网格地图上部署他们的炮兵部队.一个\(N * M\)的地图由N行M列组成,地图的每一格可能是山地(用\("H"\) 表示),也可能 ...
- svn Server authz 配置示例(文件夹权限配置)
[aliases] [groups] admin = jiangzhehao technology = chenlei,liulei,xunzheng,qiaomingjie sales = chen ...