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

 更新时间:2021年04月09日 11:56:14   作者:_奔跑的企鹅  
这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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数据丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3如何自定义js文件(插件或配置)

    vue3如何自定义js文件(插件或配置)

    这篇文章主要介绍了vue3如何自定义js文件(插件或配置),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • VUE UPLOAD 通过ACTION返回上传结果操作

    VUE UPLOAD 通过ACTION返回上传结果操作

    这篇文章主要介绍了VUE UPLOAD 通过ACTION返回上传结果操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载

    vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载

    这篇文章主要介绍了vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决Vue+Element ui开发中碰到的IE问题

    解决Vue+Element ui开发中碰到的IE问题

    今天小编就为大家分享一篇解决Vue+Element ui开发中碰到的IE问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue配置文件自动生成路由和菜单实例代码

    vue配置文件自动生成路由和菜单实例代码

    因为不同的用户有不同的权限,能访问的页面是不一样的,所以我们在写后台管理系统时就会遇过这样的需求:根据后台数据动态添加路由和菜单,这篇文章主要给大家介绍了关于vue配置文件自动生成路由和菜单的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue 内置组件keep-alive的使用示例

    Vue 内置组件keep-alive的使用示例

    这篇文章主要介绍了Vue 内置组件keep-alive的使用示例,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下
    2021-04-04
  • 浅谈Vue单页面做SEO的四种方案

    浅谈Vue单页面做SEO的四种方案

    Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法,本文就详细的介绍一下
    2021-10-10
  • Vue官方文档梳理之全局配置

    Vue官方文档梳理之全局配置

    这篇文章主要介绍了Vue官方文档梳理之全局配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue前端开发keepAlive使用详解

    vue前端开发keepAlive使用详解

    在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态
    2021-10-10
  • vue项目网页自适应等比例放大缩小实例代码

    vue项目网页自适应等比例放大缩小实例代码

    等比例缩放可以在不同的分辨率下都能够一屏展示,不会有滚动条的问题,也不会有适配问题,下面这篇文章主要给大家介绍了关于vue项目网页自适应等比例放大缩小的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论