VueX浏览器刷新如何实现保存数据
作者:MO0069 发布时间:2024-04-30 10:24:35
标签:VueX,浏览器,刷新,保存数据
VueX浏览器刷新保存数据
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。
原因:
因为当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化
方法一
在 App.vue 的 created 钩子函数里写下了如下代码;
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
方法二
router/router.js 下
setItem()
刷新getItem()
刷新浏览器后,Vuex的数据丢失,如何解决?
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。
因为 store 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化。
解决方法
使用vuex-along
vuex-along 的实质是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中。
安装vuex-along
npm install vuex-along --save
配置 vuex-along: 在 store/index.js 中最后添加以下代码:
import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
? ? //modules: {
? ? ? ? //controler ?//模块化vuex
? ? //},
? ? plugins: [VueXAlong({
? ? ? ? name: 'store', ? ? //存放在localStroage或者sessionStroage 中的名字
? ? ? ? local: false, ? ? ?//是否存放在local中 ?false 不存放 如果存放按照下面session的配置
? ? ? ? session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
? ? })]
});
使用localStorage 或者 sessionStroage
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));
? ? });
},
来源:https://blog.csdn.net/weixin_38069018/article/details/118363301
0
投稿
猜你喜欢
- 前言小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以
- 本文实例讲述了python获取图片颜色信息的方法。分享给大家供大家参考。具体分析如下:python的pil模块可以从图片获得图片每个像素点的
- 用途logging模块是Python的内置模块,主要用于输出运行日志,可以灵活配置输出日志的各项信息。基本使用方法logging.basic
- 本文实例为大家分享了python手写均值滤波的具体代码,供大家参考,具体内容如下原理与卷积类似,设置一个n*n的滤波模板,滤波模板内的值累加
- 第四篇《WEB标准能有多难?》专栏文章将结束关于文本部分的XHTML的讲解。那么这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换
- 什么是序列化与反序列化这里引入微软对序列化的解释:序列化是指将对象转换成字节流,从而存储对象或将对象传输到内存、数据库或文件的过程。 它的主
- 单步调试step into/step out/step over区别step into:单步执行,遇到子函数就进入并且继续单步执行(简而言之
- 多标签分类器多标签分类任务与多分类任务有所不同,多分类任务是将一个实例分到某个类别中,多标签分类任务是将某个实例分到多个类别中。多标签分类任
- 1. 查看本机系统及python版本# cat /etc/redhat-release CentOS release 6.7 (Final)
- 使用递归查找父元素,知道查到想要的元素,然后return getParentTag(startTag) { var self
- 什么是结构体Go语言中没有“类”的概念,也不支持“类”的继承
- 资源React-16.8.*react-router-dom-4.3.*TypeScript-3.5.*webpack-4.*eslint-
- eclare @str nvarchar(50);set @str='462,464,2';select @str as &
- 前言在之前开发vue2项目中,props 属性在组件中经常使用来进行组件通信。现在在开发vue3项目的过程中,我们开发小组渐渐的减少prop
- Pycharm 作为一款针对 Python 的编辑器,配置简单、功能强大、使用起来省时省心,对初学者友好,这也是为什么编程教室一直推荐新手使
- 测试图片一、相对路径(报错)使用相对路径插入会报错(确认路径正确无误)import xlwings as xwwb = xw.Book()s
- 列表列表是Python中最具灵活性的有序集合对象类型。与字符串不同的是,列表可以包含任何类型的对象:数字、字符串甚至其他列表。列表是可变对象
- 问题描述:已经用pip install jieba安装好jieba分词工具,但是在Jupyter 里import jieba运行一直提示Im
- Anaconda is a completely free Python distribution (including for comme
- 记录三种添加cookie保持接口登录状态的方法,方便自己回顾。1.简单粗暴式。此方法比较小白,前提是已经通过fiddler抓包等方式拿到了c