解决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元素已经开始走动,所以如果网慢的话 ...
随机推荐
- Tomcat配置:java.lang.UnsatisfiedLinkError: D:\DevelopTool\tool20150402\tomcat\apache-tomcat-8.5.16\bin\tcnative-1.dll: Can't load AMD 64-bit .dll on a IA 32-bit platform
解决办法: tomcat启动时提示java.lang.UnsatisfiedLinkError: D:\soft\devTool\apache-tomcat-7.0.57\bin\tcnative-1 ...
- phpstorm配置phpunit进行单元测试
1.配置单元测试目录: (1)autoload.php <?php function autoloader($dir){ spl_autoload_register(function($name ...
- java 工具类使用
BigDecimalUtil 金额计算工具类 import java.math.BigDecimal; public class BigDecimalUtil { private BigDecimal ...
- [.net core]7 4种app key value的配置方法及优先顺序
就是这货 点开查看内容 { "Logging": { "LogLevel": { "Default": "Warning" ...
- 你知道dos和cmd之间的关系以及区别吗?
含义 dos 英文disk operation system,意思是磁盘操作系统是微软系列操作系统之一,dos是一个独立的操作系统,dos对操作人员的要求是比较高的,操作者需要记住很多的命令,并利用命 ...
- 【leetcode 136】136. Single Number
要求:给定一个整数数组,除了其中1个元素之外,其他元素都会出现两次.找出这个只出现1次的元素. 例: array =[3,3,2,2,1] 找出元素1. 思路:最开始的想法是用两次for循环,拿 ...
- Scrapy-redis分布式+Scrapy-redis实战
[学习目标] Scrapy-redis分布式的运行流程 Scheduler与Scrapy自带的Scheduler有什么区别 Duplication Filter作用 源码自带三种spider的使用 6 ...
- PAT Basic 1047 编程团体赛 (20 分)
编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...
- zencart产品批量采集伪原创方法,再也不用担心与别人的数据重复了
首先,请你提供与产品相关的关键词一份,至于关键词如何来,相信做SEO的你很清楚了,SEO关键词搜索工具应该很多,比如谷歌相关关键词搜索,用记事本的形式保存为每行一个关键词.采集产品的时候,我会帮你将关 ...
- jumpserver部署1.0版本
A. jumpserver概述 跳板机概述: 跳板机就是一台服务器,开发或运维人员在维护过程中首先要统一登录到这台服务器,然后再登录到目标设备进行维护和操作: 跳板机缺点:没有实现对运维人员操作行为的 ...