created () {

      this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("beforeunload"))));

      window.addEventListener('beforeunload', ()=>{

        let state = JSON.stringify(this.$store.state)

          localStorage.setItem("beforeunload",state);

      });

    },

在created 生命周期中 保存数据 和同步数据

vue 使用vuex 刷新时保存数据的更多相关文章

  1. 十、Vue：Vuex实现data(){}内数据多个组件间共享

    一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...

  2. vue 浏览器页面刷新时执行一段代码

    当刷新(浏览器刷新)页面的时候,重置到首页(或其他页面)纯js的是window.onload()但是vue几乎不会用到这个,vue所有的是生命周期那么我们可以根据生命周期来实现这个beforeCrea ...

  3. Vuex 刷新后数据丢失问题 Typescript

    问题描述:Vuex保存的数据在页面刷新后会全部丢失清除 问题解决方案:使用sessionstorage进行保存,在页面刷新时保存至sessionStorage,页面在加载时再进行填充   (另有vue ...

  4. vue常见问题处理 -- 页面刷新时，如何保持原有vuex中的state信息

    一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...

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

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

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

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

  7. 10.解决VUEX刷新的时候出现数据消失

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  8. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

  9. vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

    vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492   vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...

随机推荐

  1. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  2. 彻底搞懂C#异步编程 async和await的原理

    1.前提 熟练掌握Task并行编程. 2.用Task并行解释async和await异步 因为控制台有多线程操作的优化,因此这里选择winform来做示例. 测试代码如下所示: 有三个textbox,一 ...

  3. Oracle 与 PostgreSQL 函数行为的差异引发性能差异

    对于Oracle,对于数据修改的操作通过存储过程处理,而对于函数一般不进行数据修改操作.同时,函数可以通过 Select 进行调用,而存储过程则不行. 一.对于volatile 函数的行为 1.Ora ...

  4. spark 读取Geomesa(Hbase)数据

    package com.grady.geomesa import org.apache.hadoop.conf.Configuration import org.apache.spark.SparkC ...

  5. 【学习笔记】Vins-Mono论文阅读笔记（二）

    估计器初始化简述 单目紧耦合VIO是一个高度非线性的系统,需要在一开始就进行准确的初始化估计.通过将IMU预积分与纯视觉结构进行松耦合对齐,我们得到了必要的初始值. 理解:这里初始化是指通过之前imu ...

  6. 彻底掌握Makefile（二）

    彻底掌握Makefile(二) 前言 在前面的文章彻底掌握Makefile(一)当中,我们简要的介绍了一些常见的makefile使用方法,在本篇文章当中我们将继续介绍一些makefile当中的常见用法 ...

  7. Elastic：使用ElastAlert发送邮件通知

    转载自:https://blog.csdn.net/UbuntuTouch/article/details/105473542 文档地址:https://elastalert.readthedocs. ...

  8. frpc穿透报错 日志显示 http: proxy error: no such domain 解决办法

    问题出在客户端的设置上,比如你的frps服务器IP为114.114.114.114,设置的vhost_http_port端口为 8080,在客户端设置的是域名fk.abc.com 指向frps所在服务 ...

  9. nginx日志输出配置json格式

    修改nginx配置文件 http { include mime.types; default_type application/octet-stream; charset utf-8; # 原有日志格 ...

  10. aws-cli命令-ec2实例相关的操作

    aws上可以使用aws-cli的方式管理实例,记录一些常用的操作 1.启动.关闭.终止实例(目前笔者发现只能通过指定实例ID进行管理) # 启动/关闭/重启 指定的实例 aws ec2 start-i ...