刷新页面时候将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. 20180610模拟赛T4——木棍

    有\(N\)根木棍,每根的长度\(L\)和重量\(W\)已知.这些木棍将被一台机器一根一根地加工.机器需要一些启动时间来做准备工作,启动时间与木棍被加工的具体情况有关.启动时间遵循以下规则: 加工第一 ...

  2. crystalreport使用方法

    使用: 打开CrystalReport官网下载页 目前最新版本为13.0.4 选择“SAP Crystal Reports, version for Visual Studio 2010 - Stan ...

  3. Gym - 102056C(2018EC final) -Heretical … Möbius ——CRT

    题意 给出一个长为200的01序列,判断是否在前1e9个莫比乌斯*值中.(这里的莫比乌斯值加了绝对值) 分析 意到因为4的倍数一定是0,9的倍数一定是0……169的倍数一定是0.那么我们可以对4,9, ...

  4. matlab-fsolve函数求解多元非线性方程

    记录一下代码,方便下次套用模板 options=optimset('MaxFunEvals',1e4,'MaxIter',1e4); [x,fval,exitflag] = fsolve(@(x) m ...

  5. 【oracle】ORA-00257 archiver error. Connect internal only, until freed

    [原因]归档日志太多导致磁盘空间过小. [解决办法]删除日志或加大空间

  6. requests-html

    目录 一 介绍 二 安装 三 如何使用requests-html 四 支持JavaScript 五 自定义User-Agent 六 模拟表单提交 七 支持异步请求 一 介绍 Python上有一个非常著 ...

  7. gnome 3 插件设置

    插件安装及管理方法 应该需提前在gnome-tweaks中打开user-theme,重启电脑后才可找到Add-ons Debian9 下在应用商店插件add-ons里进行选择安装,在应用商店已安装应用 ...

  8. selenium--拖拽页面元素

    from selenium import webdriver import unittest from selenium.webdriver import ActionChains import ti ...

  9. SDOI 2019 R2 摸鱼记

    其实并没有什么动力来写这篇游记,毕竟呢,明明已经做好了被吊打的心理准备,可是当 Day 2 挂到没分时,当看到自己在高一里还排名二十时,还是有些,有些难言的滋味.学长们该走的真的都走了,就要只剩下 z ...

  10. 洛谷P5020 货币系统

    题目 题意简化一下就是找题目给定的n个数最多能消掉多少个,我们用个tong[i]来记录i这个数值能不能用小于等于i的货币组合起来,等于1意味着他只能由自己本身的货币组成,等于2说明他可以被其他货币组成 ...