参考文章:

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保存的数据刷新页面时清空的更多相关文章

  1. 刷新页面时 select值保持不变

    刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...

  2. vuex中store保存的数据,刷新页面会清空

    用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...

  3. Vuex踩坑--数据刷新时丢失

    近期做项目的过程中,使用vuex保存页面公共数据,测试无网情况后又接通网络的情况下,页面进行重新加载.遇到一个小bug——发现在苹果手机IOS系统下,页面刷新重新加载后页面中通过vuex存储并显示的数 ...

  4. 解决让刷新页面时不提示 "重试或取消”对话框

    如果刷新一个已经提交过的页面时,系统总是会提示一个 "重试或取消”的对话框.,如果是一个普通的页面,好象也无所谓,有就有,大不了多点一下.但是当我们是在子窗体中刷新父窗体时,就显得有点多余了 ...

  5. 解决微信浏览器无法使用reload()刷新页面

    场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信 ...

  6. 从dao层查出的数据到页面时数值都是零的异常

    异常问题: IllegalArgumentException: argument type mismatch at cn.tedu.utils.BeanListHandler.handle(BeanL ...

  7. jQuery实现发送验证码30s倒计时,且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

  8. 解决jQuery load()加载GB2312页面时出现乱码

    jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. 这是jQueryAJAX.html <!DOCTYPE html PUBLIC "-// ...

  9. vue.js中 v-show在刷新页面时,会闪一下,如何解决?

    因为浏览器是html从上到下执行,先执行Dom元素,然后执行javaScript元素,v-show实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话 ...

随机推荐

  1. 2019.07.09 纪中_B

    错失AK记 2019.07.09[NOIP提高组]模拟 B 组 明明今天的题都很水,可就是没蒟蒻. 写题的时候: T0一眼高精(结果没切)T1看到2啊8啊果断转二进制观察,发现都是左移几位然后空出的位 ...

  2. java实现顺序队列

    package queue; import java.util.Scanner; public class ArrayQueueLoop { public static void main(Strin ...

  3. 洛谷 P1801 黑匣子 题解

    题面 离线处理: 大体思路就是将数组排序,然后对于第k次询问把不可行的数打上标记,然后从头开始寻找第k个没打标记的点的值(排序后的数组保证了它是第k小的). 实现方法:首先离散化原始数组,得到数组fi ...

  4. Codeforces 1220D. Alex and Julian

    传送门 首先考虑怎样的集合一定是合法的 发现全部是奇数的集合一定合法,因为每次都是奇数连偶数,偶数连奇数 然后考虑如果集合同时有奇数和偶数是否一定不合法,结论是一定不合法,证明如下: 设某个奇数为 $ ...

  5. jfinal layui 多选传值问题整理

    使用layui在显示数据表格进行多选的时候遇到的几个问题: 1.增加监听,让你的数据表格可以进行复选. layui.use('table', function(){ var $ = layui.jqu ...

  6. nginx的服务架构

    nginx服务架构 模块 习惯上将nginx的模块分成核心模块,HTTP模块,邮件模块,以及第三方模块 核心模块主要包含两类功能的支持,一类是主体功能,包括进程管理,权限管理错误日志解析,配置解析:另 ...

  7. tensorflow 学习教程

    tensorflow 学习手册 tensorflow 学习手册1:https://cloud.tencent.com/developer/section/1475687 tensorflow 学习手册 ...

  8. 「LCT」

    终于在多篇题解和我的个人超常发挥下抄完了lct的所有题,kx死了. 理解 在我看来,实际上lct的板子没有什么考的,更重要的可能是起到一个数据结构的维护作用实际上就是出题人想给你找点乐子. 前几道题都 ...

  9. jquery 查找元素,并判断隐藏或显示

    html <div class="panel-heading"> <h4 class="panel-title"> <a data ...

  10. 跨平台开发框架DevExtreme v19.1.4正式发布|附下载

    DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...