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. 【HTML】学习路径2-设置文档类型、网页编码、文件注释

    第一章:设置文档类型 我们通常在html文件最前面写一行: <!DOCTYPE html> 这玩意有啥用? https://developer.mozilla.org/zh-CN/docs ...

  2. 第二十二篇:有关插槽solt的使用

    1.什么是插槽? 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示, 父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内 ...

  3. Self-Attention:初步理解

    Self-Attention 的基本结构与计算 Attention(注意力)实际上就是权重的另一种应用的称呼,其具体结构与初始输入的 content \(\vec{x_{1}}, \vec{x_{2} ...

  4. 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

  5. 前端必读2.0:如何在React 中使用SpreadJS导入和导出 Excel 文件

    最近我们公司接到一个客户的需求,要求为正在开发的项目加个功能.项目的前端使用的是React,客户想添加具备Excel 导入/导出功能的电子表格模块. 经过几个小时的原型构建后,技术团队确认所有客户需求 ...

  6. 在Portainer上管理其他docker主机(这只是其中一种方式),另一种方式看这个文档:使用Portainer管理其他主机的docker应用有两种方式

    其他主机开启远程连接docker端口 需要设置一下2375端口的监听.通过修改docker配置文件方式进行监听. 修改配置文件修改监听端口 使用Centos7安装的docker,所以下面的配置是适用于 ...

  7. python推导式特殊用法

    字典推导式 >>> dic = {x: x**2 for x in (2, 4, 6)} >>> dic {2: 4, 4: 16, 6: 36} >> ...

  8. MySql的InnoDB的三层B+树可以存储两千万左右条数据的计算逻辑

    总结/朱季谦 B+树是一种在非叶子节点存放排序好的索引而在叶子节点存放数据的数据结构,值得注意的是,在叶子节点中,存储的并非只是一行表数据,而是以页为单位存储,一个页可以包含多行表记录.非叶子节点存放 ...

  9. 02_快捷键及常用DOS命令

    快捷键 一. 电脑快捷键 Ctrl + C:复制 Ctrl+ V:粘贴 Ctrl+ A:全选 Ctrl+ S:保存 Ctrl+ Z:撤销 Ctrl+ X:剪切 Alt + F4:关闭窗口 Shift ...

  10. 20_IO

    IO框架 一. 流的概念 概念:内存与存储设备之间传输数据的通道 水借助管道传输:数据借助流传输 二. 流的分类 按方向[重点] 输入流:将<存储设备>中的内容读入到<内存>中 ...