解决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元素已经开始走动,所以如果网慢的话 ...
随机推荐
- P4962 朋也与光玉题解
题目链接 光坂小镇是一个由 n 个点(编号为 1 ~ n),m 条有向边构成的图,每个节点上都有一个光玉,光玉共有 k 种,编号为 0 ~ k−1. 为了使一切改变,朋也需要找齐全部的 k种光玉.他可 ...
- Nginx教程(一)-全面认知
什么是 nginx nginx 是一款高性能的 http 服务器,反向代理服务器,电子邮件(IMAP/POP3)代理服务器: 它的特点就是高性能,占用内存少,支持高并发,运行稳定: 官方测试 可支持 ...
- homebrew学习(五)之homebrew cask和homebrew services
homebrew cask 如果我想安装Chrome浏览器怎么办?试试下面的命令: brew install google-chrome 发现并不能安装,没有该软件.怎么办?好消息是一个叫做homeb ...
- Action实现prepareable接口后定义前置方法
// 访问每一个action的方法都会先调用此方法:前置方法 @Override public void prepare() throws Exception { System.out.println ...
- vue-awesome-swiper轮播插件
1. github上搜索vue-awesome-swiper 2. readme中有安装方法,建议在插件名后@版本号,使用稳定的老版本 npm install vue-awesome-swiper@x ...
- FileUtils.writeByteArrayToFile方法
FileUtil类是Apache Commons IO库里面的一个类,是与文件相关的一个辅助类,我写了一个可运行的java文件 import java.io.*; import org.apache. ...
- java.lang.ClassNotFoundException: org.apache.jsp.login_jsp
<span style="font-family: Simsun; background-color: rgb(255, 255, 255);">想必大家在用Eclip ...
- java内存区域及溢出异常
内存划分: java虚拟机在执行java程序过程中会把内存分为以下区域进行管理 线程私有的 虚拟机栈 局部变量表 基本数据类型 long和double占用两个slot 对象引用 返回地址 操作数栈 动 ...
- Qualcomm_Mobile_OpenCL.pdf 翻译-4-Adreno OpenCL的程序开发
这章将简要讨论一些开发Adreno OpenCL应用程序的基本要求,下面将会介绍如何调试和统计程序性能. 4.1 安卓平台上开发OpenCL程序 目前,Adreno GPU主要是在安卓操作系统和在部 ...
- Linux系统nmtui/nmcli绑定双网卡为team
今天给大家带来图形化界面网络配置工具—nmtui的使用方法,可以省去敲命令的繁琐,较少误操作,结果更加直观. 小知识: nmtui:Network Manager Text User Interfac ...