解决vuex保存的数据刷新页面时清空
参考文章:
vuex中store保存的数据,刷新页面会清空
主要解决代码:
1、更改store文件下index文件state的定义
const store = new Vuex.Store({
state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
//id
skillId:'',
//技能状态
checkStatus:''
}
})
2、在App.vue中添加
mounted() {
window.addEventListener('unload', this.saveState)
},
methods: {
saveState() {
sessionStorage.setItem('state', JSON.stringify(this.$store.state))
}
}
vue单页面应用刷新网页后vuex的state数据丢失的解决方案
主要解决代码:
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保存的数据刷新页面时清空的更多相关文章
- 刷新页面时 select值保持不变
刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...
- vuex中store保存的数据,刷新页面会清空
用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...
- Vuex踩坑--数据刷新时丢失
近期做项目的过程中,使用vuex保存页面公共数据,测试无网情况后又接通网络的情况下,页面进行重新加载.遇到一个小bug——发现在苹果手机IOS系统下,页面刷新重新加载后页面中通过vuex存储并显示的数 ...
- 解决让刷新页面时不提示 "重试或取消”对话框
如果刷新一个已经提交过的页面时,系统总是会提示一个 "重试或取消”的对话框.,如果是一个普通的页面,好象也无所谓,有就有,大不了多点一下.但是当我们是在子窗体中刷新父窗体时,就显得有点多余了 ...
- 解决微信浏览器无法使用reload()刷新页面
场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信 ...
- 从dao层查出的数据到页面时数值都是零的异常
异常问题: IllegalArgumentException: argument type mismatch at cn.tedu.utils.BeanListHandler.handle(BeanL ...
- jQuery实现发送验证码30s倒计时,且刷新页面时有效
在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...
- 解决jQuery load()加载GB2312页面时出现乱码
jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. 这是jQueryAJAX.html <!DOCTYPE html PUBLIC "-// ...
- vue.js中 v-show在刷新页面时,会闪一下,如何解决?
因为浏览器是html从上到下执行,先执行Dom元素,然后执行javaScript元素,v-show实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话 ...
随机推荐
- 【6.18校内test】T3细胞分裂
尽管T1T2很简单,但还是阻止不了我T3wa一片 细胞分裂[题目链接] xcg同学有一个80pts的代码 他说他的代码和我的很像,可惜我比较笨,只有30pts 其实这道题考场上是想到要分解质因数了,然 ...
- Being a Good Boy in Spring Festival
Being a Good Boy in Spring Festival Problem Description 一年在外 父母时刻牵挂春节回家 你能做几天好孩子吗寒假里尝试做做下面的事情吧 陪妈妈逛一 ...
- 2019CCPC厦门游记
距离上次2018CCPC吉林打铁一年有余,这次的厦门也是我们team拿到的第一块区域赛牌子,写一篇博客留念一下QAQ. 作为弱校的菜鸡队,我们提前两天就来到厦门,不得不说刚到厦门的两天还是很快乐的,住 ...
- python2.7.5升级到2.7.14或者直接升级到3.6.4
python2.7.5升级到2.7.14 1.安装升级GCC yum install -y gcc* openssl openssl-devel ncurses-devel.x86_64 bzip2 ...
- url简单加密
使用urlencode和urldecode可以对传输的字符串进行简单的加密,也可用于将汉字转换为16进制数字进行传输,每个16进制数前面都带一个% urlencode : 将中文转换为16进制数 ur ...
- [Linux]Linux下经常会用到的简单实例(持续更新)
1.查找某些进程并结束他们: ps -elf | grep '进程关键字' | awk '{print $4}'| xargs kill -9 解析: ps -elf 的 -e 代表列出所有进程,-l ...
- 使用CXF开发WebService程序的总结(三):创建webservice客户端
1.创建一个maven子工程 ws_client,继承父工程 1.1 修改父工程pom配置 <modules> <module>ws_server</module> ...
- vue-resource对比axios import ... from和import {} from 的区别 element-ui
1.vue-resource对比axios 文章1 文章2 1.0 axios params 配置参数在url 显示,form-data 用于 图片上传.文件上传 1.1 axios 全局配置 ax ...
- EF部分字段修改 自动忽略为null字段
传入一个实体 student(){id = 1,name = "测试" age = null,sex = null} 下面 是修改的方法 public async Task Edi ...
- Linux目录的切换
pwd:显示当前所在目录 ~:root目录 /:根目录 ls:查看当前目录下所有的文件和目录 cd usr 切换到该目录下usr目录 cd ../ 切换到上一层目录 cd / 切换到系统根目录 cd ...