vuex存数据,防止刷新数据丢失
1 created() {
2 if (sessionStorage.getItem('store')) {
3 this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
4 }
5 let isOnIOS = navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i);
6 let eventName = isOnIOS ? 'pagehide' : 'beforeunload';
7
8 window.addEventListener(eventName, () => {
9 sessionStorage.setItem('store', JSON.stringify(this.$store.state));
10 })
11 }
vuex存数据,防止刷新数据丢失的更多相关文章
- npm安装vuex及防止页面刷新数据丢失
npm install vuex 在项目scr目录下新建store文件夹,在store文件夹下新建index.js文件. import Vue from 'vue'; import Vuex from ...
- Vuex数据页面刷新丢失问题解决方案
用Vue做项目开发很久了,对于vuex能用.会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还 ...
- 解决vuex的数据刷新(F5)后会被初始化的问题
介绍一个vuex的数据刷新(F5)后会被初始化的问题处理的插件:vuex-localstorage 实现的原理大概就是监听浏览器的刷新,关闭事件,把vuex的值存储到本地localstorage,刷新 ...
- vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...
- 解决vuex数据页面刷新后初始化问题
在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 ...
- vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理
分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...
- Package设计1:选择数据类型、暂存数据和并发
SSIS 设计系列: Package设计1:选择数据类型.暂存数据和并发 Package设计2:增量更新 Package 设计3:数据源的提取和使用暂存 一,数据类型的选择 对于SSIS的数据类型,容 ...
- innodb是如何存数据的?yyds
前言 如果你使用过mysql数据库,对它的存储引擎:innodb,一定不会感到陌生. 众所周知,在mysql8以前,默认的存储引擎是:myslam.但mysql8之后,默认的存储引擎已经变成了:inn ...
随机推荐
- 理解First-Class Functions
def logger(msg): def log_message(): print('Log:', msg) return log_message # 返回的是函数 log_hi = logger(' ...
- linux环境安装opencv导入依赖报错问题
linux环境通过pip安装opencv后,导入cv2时报错: 在centos和ubuntu环境下都遇到相同的问题.报错原因: 缺少共享库 有两种解决办法: 一.使用如下命令查看缺少得共享库 yum ...
- 【LeetCode 26】删除排序数组中的重复项
题目链接 [题解] 沙比提 [代码] class Solution { public: int removeDuplicates(vector<int>& nums) { if ( ...
- python对具有宏excel的操作
一.使用win32com库 安装pip install pypiwin32 import win32com.client #excel xlApp =win32com.client.DispatchE ...
- idea整合springboot,访问templates下html资源问题
1.pom.xml文件中要引入themyleaf 2.在application.properties文件中加入 #拼接html前后缀spring.resources.static-locations= ...
- HDU6333 求组合数前m项的和
目录 分块 莫队 @ HDU6333:传送门 题意:求组合数前m项的和. 在线分块or离线莫队 分块 重要的一个定理: \[C_{n}^{m} = 0\;\;m > n\] \[C_{n}^{m ...
- java 简单 SocketPool
package org.rx.socks; import lombok.extern.slf4j.Slf4j; import org.rx.common.LogWriter; import org.r ...
- mongo索引(转)
转自 :https://www.cnblogs.com/efforts-will-be-lucky/p/7324789.html 默认索引 对于每一个集合(除了capped集合),默认会在_id字段 ...
- 如何查看bug属于前端还是后端
1.F12下如何查看bug属于前端还是后端?前后端分离的项目,通过ajax向后端请求数据,如果后端返回的数据有问题,那么问题就是候选,如果返回的数据没有问题,但是展示结果异常那么问题一般就出在前端. ...
- Centos7.4安装elasticsearch6.3+kibana6.3集群
Centos7.4安装elasticsearch+kibana集群 Centos7.4安装elasticsearch+kibana集群 主机环境 软件环境 主机规划 主机安装前准备 安装jdk1.8 ...