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

vuex-PErsistedstate@H_406_1@

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

• vuex页面刷新后数据丢失的方法
• vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
• vuex页面刷新导致数据丢失的解决方案
• vuex刷新后数据丢失的解决方法
• vuex页面刷新数据丢失问题的四种解决方式

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！