刷新页面时候将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刷新页面数据丢失解决办法的更多相关文章

  1. 解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据

    何为Vuex?用处是什么?为什么刷新丢失? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...

  2. 解决vuex刷新页面数据丢失

    1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...

  3. js form表单提交后如何可以不刷新页面 的解决办法

    表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 &l ...

  4. firefox快速刷新error及解决办法

    问题: 测试发过来bug,说——频繁F5刷新页面,会闪现未加载完样式的页面:    开发用的Chrome,没发现这个问题,测试用的firefox,于是从浏览器的刷新加载机制方面搜索解决办法,没搜到,运 ...

  5. vue项目打包之后页面空白解决办法

    之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...

  6. 前端跳转处理--房天下的访问页面部分ip自动跳转到登录页面的解决办法(xjl456852原创)

    朋友说自己在访问房天下的页面时,他们页面进行了跳转,跳转到登录页面,说是前端跳转.让我也看看,我看我的机器没有进行跳转. 后来就发现有的机器在访问页面会自动跳转到登录页面.有的不会进行跳转. 比如访问 ...

  7. position:fixed 造成页面抖动解决办法

    今天做项目遇到一个问题.鼠标滚动到指定长度后,理想状况是菜单吸附到顶部.但是实际上在一些页面上会造成抖动.定位之后发现.window.pageYoffset值会变成0 搜索一些资料后发现.因为fixe ...

  8. javascript刷新页面的集中办法

    1. history.go(0) 2. location.reload() 3. location=location 4. location.assign(location) 5. document. ...

  9. glxgears刷新只有60FPS解决办法

    问题原因在于屏幕的垂直同步刷新率的限制,解决办法是关闭垂直同步刷新. 编辑~/.drirc <driconf> <device screen=" driver=" ...

随机推荐

  1. TypeScript 解构和展开

    解构数组 解构数组元素 let input = [1, 2]; let [first, second] = input; console.log(first,second); 交换值 [first, ...

  2. 从Oop-Klass模型看透反射

    <红楼梦>第十二回,贾瑞因痴迷王熙凤,被王熙凤折腾的眼看就快不行了.当然这里面是没有多少爱的,完全因王熙凤的美貌而起.就在这时来了一个跛足道人,带来了一面宝镜,说能治好贾瑞的病.当然这可不 ...

  3. django -- ORM实现作者增删改查

    前戏 前面我们已经实现了出版社的增删改查,书的增删改查,书和出版社的对应关系.现在来写一下作者的增删改查和书的对应关系,那书和作者有什么关系呢?一个作者可以写多本书,一本书可以有多个作者,所以书和作者 ...

  4. 洛谷P2504 [HAOI2006]聪明的猴子题解

    题目 记录悲伤 已知猴子的数量以及猴子跳的最大距离 已知数的数量以及树的坐标 最小生成树 每两棵树之间的距离需要枚举来计算 算出最大值之后再与n只猴子进行比较记录答案 需要注意 在使用最小生成树的时候 ...

  5. 内置函数、反射、__str__、__del__、元类

    一.内置函数的补充 isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo: pass obj=Foo() print(isinstance(obj,Foo) ...

  6. TCGA简易下载工具 SangerBox

    下载地址:http://sangerbox.com/ https://shengxin.ren/article/208 Understanding TCGA mRNA Level3 analysis ...

  7. 一文带你了解elasticsearch

    一文带你了解elasticsearch cxf2102100人评论160人阅读2019-07-02 21:31:36   elasticsearch es基本概念 es术语介绍 文档Document ...

  8. spark 存取mysql

    1.先上代码,存入mysql val spark = SparkSession.builder() .appName("jdbc") .getOrCreate() import s ...

  9. 所谓的SaaS服务到底是什么?

    先从SaaS说起,SaaS是英文Soft as a Service(软件即服务)的简写.SaaS并不是指代一个行业或者一种技术,它是一种2B的专业型软件租赁使用模式. 什么是专业型软件? 就是为了解决 ...

  10. Akka-CQRS(8)- CQRS Reader Actor 应用实例

    前面我们已经讨论了CQRS-Reader-Actor的基本工作原理,现在是时候在之前那个POS例子里进行实际的应用示范了. 假如我们有个业务系统也是在cassandra上的,那么reader就需要把从 ...