Vuex强刷数据丢失问题如何彻底解决？

本文共计467个文字，预计阅读时间需要2分钟。

Vuex-PersistedState 核心原理：将 Vuex 数据保存在本地存储中，页面刷新时从缓存中读取数据，加载到 Vuex 中。安装方式：`npm install vuex-persistedstate --save`，然后在 store 中引入插件：`import persistedState from 'vuex-persistedstate';`

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