关于vuex状态刷新网页时数据被清空问题及解决
作者：不过期的约定 发布时间：2024-04-30 10:22:18
标签：vuex,刷新网页,数据,清空
vuex状态刷新网页时数据被清空问题
vuex状态管理，在网页刷新数据被清空的解决方法。
在main.js中写入下面的代码段（亲测有效）
//刷新保存状态
if (sessionStorage.getItem("store")) {
store.replaceState(
Object.assign(
{},
store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store")
}
//监听，在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(store.state));
});
vuex状态在页面刷新时,会清空状态的解决
store写入的state在页面刷新时会被清空，这时可以用sessionStorage缓存状态。因为localStorage会永久保存数据，只有用户手动清除的时候才会清除。cookie存储内存只有4k,并且始终在同源的http请求中携带。而sessionStorage在关闭浏览器页面时就会清空。
因为状态只会在刷新页面的时候清空，所以我们只需要去app.vue里面在页面刷新之前把store保存在sessionStorage里面。在页面加载时读取sessionStorage的值
由于浏览器存储时会自动把对象转换成字符串格式，且不具备转换对象的键和值为字符串的效果，只会转换为[object,object]。因此需要先将对象转换为json字符串存储，取出时再使用JSON.parse()方法转换为json对象。
app.vue
created () {
? ? // 在页面加载时读取sessionStorage
? ? if (sessionStorage.getItem('store')) {
? ? ? this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
? ? }
? ? // 在页面刷新时将store保存到sessionStorage里
? ? window.addEventListener('beforeunload', () => {
? ? ? sessionStorage.setItem('store', JSON.stringify(this.$store.state))
? ? })
? }
来源：https://blog.csdn.net/chen123789hkb/article/details/90175607
0
投稿猜你喜欢
- 简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁"
一、下载termux直接搜索Termux，进入官网： 点击箭头所指的标志，进入页面，往下划到下载版本，直接下最新版本，不推荐下载F- 一、业务需求在使用Python进行业务开发的时候，需要将一些数据保存到本地文件存储，方便后面进行数据分析展示。二、需求分析通过查看需求可得出
- 知识点：了解lxml模块和xpath语法的关系；了解lxml模块的使用场景；了解lxml模块的安装；了解 谷歌浏览器xpath helper
- 本文实例讲述了Python实现根据日期获取当天凌晨时间戳的方法。分享给大家供大家参考，具体如下：# -*- coding:utf-8 -*-
- 虽然有很多种方式可以解决这个问题，但是我们可以用T-SQL代码来处理这个文件删除过程。我用xp_cmdshell命令和FORFILES命令来
- 下面我先给出了一小段代码示例，思考一下，为什么name，my_name 不会有波浪线，而 myname 和 wangbm 会有波浪线呢？Py
- 本文实例讲述了Python读取Pickle文件信息并计算与当前时间间隔的方法。分享给大家供大家参考，具体如下：python—–读取Pickl
- 本文实例讲述了Python中函数参数调用方式。分享给大家供大家参考，具体如下：Python中函数的参数是很灵活的，下面分四种情况进行说明。(
- 本文实例讲述了python中assert用法。分享给大家供大家参考。具体分析如下：1、assert语句用来声明某个条件是真的。2、如果你非常
- 今天遇到这个问题，上网查到以下解决方法：1.检查你的磁盘剩余空间是否足够,如果没有磁盘剩余空间,则清理磁盘,腾出空间
- 本文实例为大家分享了Python实现发送QQ邮件的封装代码，供大家参考，具体内容如下封装codeimport smtplibfrom ema
- 在开发高并发系统时，有三把利器用来保护系统：缓存、降级和限流。那么何为限流呢？顾名思义，限流就是限制流量，就像你宽带包了1个G的流量，用完了
- 一、说明压缩和解压缩是日常常用的操作，不管是windows上图形界面的操作，还是linux上用命令来进行压缩解压缩，总的而言都还是比较方便的
- 本文实例分析了thinkphp的四种url访问方式。分享给大家供大家参考。具体分析如下：一、什么是MVC thinkphp的MV
- 代码案例import pluggy# HookspecMarker 和 HookimplMarker 实质上是一个装饰器带参数的装饰器类，作
- 在开发网站的过程中,404,500错误，是不可避免产生的。一旦产生了这种错误，很多可以通过web server 来处理。比如使用 apach
- <script> window.onload=function(){ upfile('file.php'); }
- 本文实例为大家分享了python学生管理系统的具体代码，供大家参考，具体内容如下基于列表存储的学生管理系统，实现如下功能==========
- Python os.remove() 方法os.remove() 方法用于删除指定路径的文件。如果指定的路径是一个目录，将抛出OSError
