关于vuex强刷数据丢失问题解析

2024-10-06 22:13:08

vuex-persistedstate

核心原理：在本地存储中存入所有的vuex数据，页面刷新时到缓存中取数据，放到vuex中
下载：$ npm install vuex-persistedstate -S
在store中引入插件

import persistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
  // ...
  plugins: [persistedState()]
})

vuex-persistedstate默认使用localStorage储存，若想使用sessionStorage，可采用以下配置

import persistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [persistedState ({
      storage: window.sessionStorage
  })]
})

若想使用cookie，可采用以下配置
下载：$ npm install js-cookie -S

import Cookies from 'js-cookie';
import persistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [persistedState ({
      storage: {
		getItem: key => Cookies.get(key),
		setItem: (key, value) => Cookies.set(key, value),
		removeItem: key => Cookies.remove(key)
	}
  })]
})

secure-ls

加密storage
当我们在vuex中保存了用户信息，虽然使用起来方便了很多，但是为了解决vuex刷新页面数据丢失的问题，使用了vuex-persistedstate插件，vuex-persistedstate是没有加密的，用户的信息就暴露在缓存中,
非常的不安全，所以需要配合secure-ls来加密storage
下载： $ npm install secure-ls -S

import Vue from "vue";
import Vuex from "vuex";
import SecureLS  from 'secure-ls';
import persistedState from "vuex-persistedstate";

const ls = new SecureLS({
	encodingType: "aes", // 加密方式
	isCompression: false, // 是否启用数据压缩
	encryptionSecret: "old-beauty" //
});

Vue.use(Vuex);

export default new Vuex.Store({
	...
	plugins: [persistedState({
		// key: "123123", // 存入storage是的key
		storage: {
			getItem: key => ls.get(key),
			setItem: (key, value) => ls.set(key, value),
			removeItem: key => ls.remove(key)
		}
	})],
});

【注】vuex-persist（不兼容ie） vuex-persistedstate

到此这篇关于vuex强刷数据丢失的文章就介绍到这了,更多相关vuex数据丢失内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vuex刷新后数据丢失的解决方法

导语: 我们在写vue项目的时候,经常要用到vuex作为内存来储存,但是我们存放在vuex中的数据(用户数据,当前页面的数据等等)在刷新后就会丢失,那么如何解决呢?超级简单. 1,安装vuex-persistedstate npm install --save vuex-persistedstate 2,修改store import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ sta
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果尝试过几种方法之后最终采用vuex+sessionStorage结合的方法在mutations中 setResultValue(state,flag){ sessionStorage.setItem("resultValue", JSON.stringify(flag)) state.resultValue = flag } 在getters中 getResultValue getResultValue(state){ stat
vuex页面刷新后数据丢失的方法

1. 原因 (1)js代码是运行在内存中的,代码运行时的所有变量.函数都是保存在内存中. (2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值. (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage.Session Storage.Index DB等.这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储. 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据: (1)存储的数据是永久性的,永不过期: (
vuex页面刷新导致数据丢失的解决方案

解决vuex页面刷新导致数据丢失问题 vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失.我们有两种方法解决该问题: 1.使用vuex-along 2.使用localStorage或者sessionStroage 1.使用vuex-along vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中,只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方
关于vuex强刷数据丢失问题解析

vuex-persistedstate 核心原理:在本地存储中存入所有的vuex数据,页面刷新时到缓存中取数据,放到vuex中下载:$ npm install vuex-persistedstate -S 在store中引入插件 import persistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [persistedState()] }) vuex-persistedst
vuex入门教程,图文+实例解析

目录我理解的概念核心概念秒懂不说废话直接在实例里面一一解释安装创建再来看看store的实例化挂载store 直接在实例里面看怎么快速使用store吧简单解释一下直接看效果吧我理解的概念 vuex是为vue提供了全局的状态仓库(store),就像一个状态机,避免了父子.兄弟组件之前复杂的传参.他维持了全局共用的数据的一致性. 核心概念秒懂 1,state 共用的数据 2,getters 处理state后得到想要的数据 3,mutations 唯一可以修改state的函数 4,a
vuex中的state属性解析

目录 state属性介绍 state的使用扩展 vuex的State 单一状态树在Vue组件中获得 Vuex 状态 mapState辅助函数 state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树——用一个对象就包含了全部的应用层级状态.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快
Java中使用开源库JSoup解析HTML文件实例

HTML是WEB的核心,互联网中你看到的所有页面都是HTML,不管它们是由JavaScript,JSP,PHP,ASP或者是别的什么WEB技术动态生成的.你的浏览器会去解析HTML并替你去渲染它们.不过如果你需要自己在Java程序中解析HTML文档并查找某些元素,标签,属性或者检查某个特定的元素是否存在的话,那又该如何呢?如果你已经使用Java编程多年了,我相信你肯定试过去解析XML,也使用过类似DOM或者SAX这样的解析器,不过很有可能你从未进行过任何的HTML解析的工作.更讽刺的是,在Jav
ThreadLocal内存泄漏常见要点解析

前段时间在网上看到了一篇关于ThreadLocal内存泄漏的文章于是个人也研究了下ThreadLocal 对象,其原理是: ThreadLocal 定义的变量值会存储在当前线程的一个map集合中这个map里面存储的是Entity对象 , Entity对象的key是当前ThreadLocal对象的弱引用, value则是ThreadLocal变量的值这就产生了一个问题: 如果ThreadLocal变量的强引用丢失了 map里面的弱引会失效 gc就回收ThreadLocal对象那么 Thr
python数据解析BeautifulSoup爬取三国演义章节示例

目录数据解析 Beautiful Soup Beautiful Soup用法案例-爬取三国演义章节及对应的内容数据解析数据解析就是将爬取到的整个页面中的局部的内容进行提取.python中常用的数据解析方式有以下三种: bs4(python中独有的) xpath(推荐,通用型强) 正则数据解析原理概述: 首先我们知道需要解析(提取)的内容都会在标签之间或者标签对应的属性中进行存储所以我们需进行指定标签的定位然后将标签或者标签对应的属性中存储的数据值进行提取(解析) Beautiful
Java开发中读取XML与properties配置文件的方法

相关阅读: 使用Ajax进行文件与其他参数的上传功能(java开发) 1. XML文件: 什么是XML?XML一般是指可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. 2.XML文件的优点: 1)XML文档内容和结构完全分离. 2)互操作性强. 3)规范统一. 4)支持多种编码. 5)可扩展性强. 3.如何解析XML文档: XML在不同的语言中解析XML文档都是一样的,只不过实现的语法不一样,基本的解析方式有两种,一种是SAX方式,是按照XML文件的顺序一
服务器Apache与Tomcat和Nginx的理解和对比分析详解

1 问题公司服务器用的Apache,后台是php语言,然后服务端用的linux C/C++,会经常听到Apache服务器,然后之前实习的公司服务端用的java,然后依稀记得使用了nginx反向代理服务器和tomcat,请求先经过nginx然后再去通过tomcat转发请求,然后对Apache服务器和tomcat和nginx理解就有点模糊了,然后今天查阅相关资料对使用场景和进行对比 2 Apache.Tomcat .Nginx名词解释 1 ) Apache Apache HTTP服务器是一个模块化
浅谈Java引用和Threadlocal的那些事

1 背景某一天在某一个群里面的某个群友突然提出了一个问题:"threadlocal的key是虚引用,那么在threadlocal.get()的时候,发生GC之后,key是否是null?"屏幕前的你可以好好的想想这个问题,在这里我先卖个关子,先讲讲Java中引用和ThreadLocal的那些事. 2 Java中的引用对于很多Java初学者来说,会把引用和对象给搞混淆.下面有一段代码, User zhangsan = new User("zhangsan", 24)
15分钟学会vue项目改造成SSR(小白教程)

15分钟学会vue项目改造成SSR Ps:网上看了好多服务器渲染的例子,基本都是从0开始的,用Nuxt或者vue官网推荐的ssr方案(vue-server-renderer),但是我们在开发过程中基本上是已经有了现有的项目了,我们所要做的是对现有项目的SSR改造.那么这里,跟我一起对一个vue-cil2.0生成的项目进行SSR改造关于这篇文章的案例源代码我放在我的github上面,有兴趣的同学,也可以去我的github查看我之前写的博客.博客一.改造技术的分析对比. 一般来说,我们做seo有

关于vuex强刷数据丢失问题解析

vuex-persistedstate

secure-ls

相关推荐

随机推荐