您的位置：首页 > 编程技术 > js  >  关于vuex强刷数据丢失问题解析

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

 更新时间：2021年4月9日 15:01  点击：1861

vuex-persistedstate

  1. 核心原理：在本地存储中存入所有的vuex数据，页面刷新时到缓存中取数据，放到vuex中
  2. 下载：$ npm install vuex-persistedstate -S
  3. 在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数据丢失内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • 解决vuex数据页面刷新后初始化操作

    这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26

  • Vue项目中如何运用vuex的实战记录

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下...2021-09-29

  • vuex中mapState思想应用

    这篇文章主要分享vuex中mapState思想及应用，在需求开发过程中，有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性，或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的，具体内容，我们一起来看下面文章内容吧...2021-10-09

  • 解决vuex刷新数据消失问题

    这篇文章主要介绍了解决vuex刷新数据消失问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-12

  • Vue.js实战之Vuex的入门教程

    这篇文章主要给大家介绍了Vue.js实战之Vuex的入门教程，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。...2017-04-03

  • 正确面对服务器数据存储防止数据丢失

    服务器数据存储安全是保障服务器正常运行的重要的环节，同时也是企业网络信息化建设的核心。...2016-01-27

  • MySQL 数据丢失排查案例

    这篇文章主要分享了MySQL 数据丢失排查的一个案例，帮助大家更好的理解和学习使用MySQL数据库，感兴趣的朋友可以了解下...2021-05-08

  • 详解Vuex的属性和作用

    这篇文章主要为大家介绍了Vuex的属性和作用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助...2021-12-27

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

    这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-09

  • vuex 多模块时 模块内部的mutation和action的调用方式

    这篇文章主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-25

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-01

  • vuex数据持久化的两种实现方案

    在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下...2021-07-13

  • 一文轻松理解Vuex

    这篇文章主要介绍了Vuex及其使用方法，感兴趣的同学，可以参考下...2021-04-25

  • vuex项目中登录状态管理的实践过程

    由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长,为了解决这个问题,Vue 提供 vuex,这篇文章主要给大家介绍了关于vuex项目中登录状态管理的相关资料,需要的朋友可以参考下...2021-09-23

  • 深入理解Vuex的作用

    这篇文章主要介绍了深入理解Vuex的作用，对Vuex感兴趣的同学，可以参考下...2021-05-12

  • vue实际运用之vuex持久化详解

    这篇文章主要为大家介绍了vue运用之vuex持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助...2021-12-23

  • vuex刷新页面后如何解决丢失store的数据问题

    这篇文章主要介绍了vuex刷新页面后如何解决丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2022-12-02

  • Vue3中Vuex的详细使用方法

    在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同,下面这篇文章主要给大家介绍了关于Vue3中Vuex详细使用的相关资料,需要的朋友可以参考下...2022-07-08

  • vuex Mutations同步Actions异步原理解析

    这篇文章主要为大家介绍了vuex Mutations同步Actions异步原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪...2022-12-12

  • 详解如何使用Vuex实现Vue后台管理中的角色鉴权

    最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下...2022-05-27