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存数据,防止刷新数据丢失的更多相关文章

  1. npm安装vuex及防止页面刷新数据丢失

    npm install vuex 在项目scr目录下新建store文件夹,在store文件夹下新建index.js文件. import Vue from 'vue'; import Vuex from ...

  2. Vuex数据页面刷新丢失问题解决方案

    用Vue做项目开发很久了,对于vuex能用.会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还 ...

  3. 解决vuex的数据刷新(F5)后会被初始化的问题

    介绍一个vuex的数据刷新(F5)后会被初始化的问题处理的插件:vuex-localstorage 实现的原理大概就是监听浏览器的刷新,关闭事件,把vuex的值存储到本地localstorage,刷新 ...

  4. vuex页面刷新数据丢失的解决办法

    在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...

  5. 解决vuex数据页面刷新后初始化问题

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 ...

  6. vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  7. ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理

    分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...

  8. Package设计1:选择数据类型、暂存数据和并发

    SSIS 设计系列: Package设计1:选择数据类型.暂存数据和并发 Package设计2:增量更新 Package 设计3:数据源的提取和使用暂存 一,数据类型的选择 对于SSIS的数据类型,容 ...

  9. innodb是如何存数据的?yyds

    前言 如果你使用过mysql数据库,对它的存储引擎:innodb,一定不会感到陌生. 众所周知,在mysql8以前,默认的存储引擎是:myslam.但mysql8之后,默认的存储引擎已经变成了:inn ...

随机推荐

  1. Java中面向对象三大特性之继承

    1. 继承的概述 继承就是子类继承父类的变量和方法,下面用代码解释一下: class Student {// 定义学生类 String name; int age; void study() { Sy ...

  2. PHP ftp_mkdir() 函数

    定义和用法 ftp_mkdir() 函数在 FTP 服务器上创建一个新目录. 如果成功,该函数返回新目录的名称和路径.如果失败,则返回 FALSE. 语法 ftp_mkdir(ftp_connecti ...

  3. BZOJ 3328: PYXFIB 解题报告

    BZOJ 3328: PYXFIB 题意 给定\(n,p,k(1\le n\le 10^{18},1\le k\le 20000,1\le p\le 10^9,p \ is \ prime,k|(p- ...

  4. 【Dart学习】-- Dart之异常处理

    概述: Dart2的异常与Java是非常类似的.Dart2的异常是Exception或者Error(包括它们的子类)的类型,甚至可以是非Exception或者Error类,也可以抛出,但是不建议这么使 ...

  5. Java异常关闭资源的两种方式

    try-catch-finally 常用,在异常关闭时应判断流是否为空 public class CloseableUtils { public static void closeable(Close ...

  6. HDU 6651 Final Exam (思维)

    2019 杭电多校 7 1006 题目链接:HDU 6651 比赛链接:2019 Multi-University Training Contest 7 Problem Description Fin ...

  7. 2018 ECNA Regional Contest J. Watch Where You Step

    题目链接:Watch Where You Step 题意 给定有向图的邻接矩阵,现在需要给该图增加边,使得如果两点可达必直接可达,求需要加边的数量. 题解 首先,如果给定 \(n\) 个结点的图中任意 ...

  8. POJ 1329 Circle Through Three Points(三角形外接圆)

    题目链接:http://poj.org/problem?id=1329 #include<cstdio> #include<cmath> #include<algorit ...

  9. 【react】---Hooks的基本使用---【巷子】

    一.react-hooks概念 React中一切皆为组件,React中组件分为类组件和函数组件,在React中如果需要记录一个组件的状态的时候,那么这个组件必须是类组件.那么能否让函数组件拥有类组件的 ...

  10. http over git server

    编译安装git 参考 <CentOS7编译安装git> 安装httpd yum install httpd -y 安装gitweb yum install gitweb -y 创建项目根目 ...