關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析
更新時(shí)間：2021年04月09日 11:56:14 作者：_奔跑的企鵝
這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
vuex-persistedstate
- 核心原理：在本地存儲(chǔ)中存入所有的vuex數(shù)據(jù)，頁面刷新時(shí)到緩存中取數(shù)據(jù)，放到vuex中
- 下載：
$ npm install vuex-persistedstate -S - 在store中引入插件
import persistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [persistedState()]
})
vuex-persistedstate默認(rèn)使用localStorage儲(chǔ)存，若想使用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
- 當(dāng)我們?cè)趘uex中保存了用戶信息，雖然使用起來方便了很多，但是為了解決vuex刷新頁面數(shù)據(jù)丟失的問題，使用了
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, // 是否啟用數(shù)據(jù)壓縮
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
到此這篇關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失的文章就介紹到這了,更多相關(guān)vuex數(shù)據(jù)丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue模仿ElementUI的form表單實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue模仿ElementUI的form表單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue項(xiàng)目中禁用ESLint的幾種常見方法小結(jié)
Vue ESLint是一個(gè)基于ESLint的插件,它專門為Vue.js應(yīng)用設(shè)計(jì),用于提供JavaScript代碼風(fēng)格檢查和最佳實(shí)踐規(guī)則,Vue項(xiàng)目通常會(huì)集成ESLint,目的是為了提升代碼質(zhì)量、保持一致性和可維護(hù)性,本文介紹了Vue項(xiàng)目中禁用ESLint的幾種常見方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)可搜索的下拉菜單組件功能，在文中通過實(shí)例代碼給大家補(bǔ)充介紹了vue組件實(shí)踐-可搜索下拉框，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果
這篇文章主要介紹了vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果，本文分步驟通過實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11
最近小編在學(xué)習(xí)vue.js ,發(fā)現(xiàn)里面有好多好玩的東東，今天小編給大家分享Vue.js2.0中的變化，小編會(huì)在日后給大家持續(xù)更新的，感興趣的朋友參考下吧2017-10-10
在本篇文章里小編給大家整理的是關(guān)于VUE 項(xiàng)目初建和常見問題以及相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-09-09
這篇文章主要介紹了vue引用外部JS的兩種種方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能及思路
這篇文章主要介紹了element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能，實(shí)現(xiàn)思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個(gè)屬性也是 element 上的一個(gè)參數(shù)，意思為是否開啟折疊動(dòng)畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下2023-01-01
在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12