解决vuex刷新store消失的问题
问题描述:在设置好store之后,刷新页面后导致store中的内容消失。
解决办法:在刷新前将store中的内容添加到sessionStorage。
实际代码:在App.vue的created()中存储与获取
// 在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
// 存储状态
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
}
// 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
截图说明:

解决vuex刷新store消失的问题的更多相关文章
- 用混入的方法引入vuex,并且解决vuex刷新页面值丢失的问题
前段时间,做了个官网项目,客户要求将首页的域名后面的参数去除干净,然后就把#去掉了,一转脸,客户让去掉子页面地址栏上的参数,这很棘手,因为子页面的内容是根据子页面地址栏上的参数而定的,如果要去掉这些参 ...
- 10.解决VUEX刷新的时候出现数据消失
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据
何为Vuex?用处是什么?为什么刷新丢失? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...
- 解决vuex刷新页面数据丢失
1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...
- 如何解决vuex因浏览器刷新数据消失,保持数据持久化问题?
vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放.通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,此过程有点麻烦.因此可以使 ...
- vuex中store保存的数据,刷新页面会清空
用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...
- 解决vuex保存的数据刷新页面时清空
参考文章: vuex中store保存的数据,刷新页面会清空 主要解决代码: 1.更改store文件下index文件state的定义 const store = new Vuex.Store({ sta ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 解决vuex在页面刷新后数据丢失的问题
一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...
随机推荐
- 如何选择最适合企业的ETL解决方案?
在今天的大数据时代,企业的数据管理和处理变得愈发重要.企业也越来越依赖于数据仓库和数据湖来提取.转换和加载(ETL)关键业务信息.一个高效.灵活的ETL解决方案不仅能提升数据处理能力,还能为企业决策提 ...
- 兄弟们!!!15天超100k
两周之前为了满足自己的一个小需求,开始构思做一个在线拼图网站,我出想法和思路,编码则全部交给了AI,仅一天时间第一个可用版本上线,网站做好颇有成就,于是分享给了朋友们体验,至此开启了一段美妙的旅程,朋 ...
- ICEE-SPI-debug最好用 SPI 和 JTAG 或更优的(高达104MHz的)SPI通信保障飞速的debug响应;不再像UART的115200 BaudRate ~
S25FL032P : 32-Mbit CMOS 3.0 Volt Flash Memory with 104-MHz SPI (Serial Peripheral Interface) Multi ...
- Rust中的workspace
java项目中用maven管理代码时,如果遇到大型工程,一般会拆分成不同的模块,比如spring-mvc中,通常会按model, view, controller建3个模块,然后根据一定的依赖关系进行 ...
- freeswitch笔记(2)-voip初体验
上一篇学习了如何安装freeswitch,接下来我们利用2个voip软件来体验如何互打电话(注:仍然是mac环境,windows用户可参考mac上的做法,原理相通) 一.安装yateclient及zo ...
- Ubuntu 18.04 LTS 修改Host,使用Host访问
两台电脑做相同修改. hostnamectl vi /etc/hosts 127.0.0.1 localhost 127.0.1.1 allspark-VirtualBox 192.168.1.76 ...
- zuul 源码解析
1. RefreshableRouteLocatorRouteLocator 路由定位器,在 Spring Cloud Zuul 中,RouteLocator 的主要作用是加载 zuul 路由配置信息 ...
- where 1 = 1的作用?会影响性能吗?count(*) 和 count(1)哪个快?
exist和in的区别? exists用于对外表记录做筛选.exists会遍历外表,将外查询表的每一行,代入内查询进行判断.当exists里的条件语句能够返回记录行时,条件就为真,返回外表当前记录.反 ...
- 一篇 ps 学习笔记
ps常用快捷键: 以下是PS中一些常用的快捷键: V:选择移动工具 M:选择矩形选框工具 L:选择套索工具 W:选择魔术棒工具 C:选择裁剪工具 E:选择橡皮擦工具 B:选择画笔工具 S:选择鼠标工具 ...
- Java文件写入与编码、字节数组、字符集、字符编解码 一文打通!
1. 编码操作和解码操作 编码操作是把字符串映射为一组byte序列.以何种方式映射?比如把"你"映射为00000000还是11111111?这是由编码集决定的. 常见的字符编码集如 ...