詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問(wèn)題
眾所周知，vuex的一個(gè)全局狀態(tài)管理的插件，但是在瀏覽器刷新的時(shí)候，內(nèi)存中的state會(huì)釋放，通常的解決辦法就是用本地存儲(chǔ)的方式保存數(shù)據(jù)，然后再vuex初始化的時(shí)候再賦值給state，手動(dòng)存再手動(dòng)取會(huì)覺(jué)得很麻煩，這個(gè)時(shí)候就可以使用vuex的插件vuex-solidification
插件地址: vuex-solidification , 歡迎star
插件原理
vuex有一個(gè)hook方法：store.subscribe((mutation, state) => {}) 每次在mutation方法執(zhí)行完之后都會(huì)調(diào)用這個(gè)回調(diào)函數(shù)，返回執(zhí)行完畢之后的state
使用方法
安裝
npm install --save vuex-solidification
引入及配置
import Vue from 'vue'
import Vuex from 'vuex'
import count from './count/index.js';
import createPersistedState from 'vuex-solidification';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: {
value: 0,
num: 1
},
pos: 1
}
plugins: [ // 默認(rèn)存儲(chǔ)所有state數(shù)據(jù)到localstorage
createPersistedState()
]
});
插件參數(shù)說(shuō)明
createPersistedState({options}) : Function
options里面可以有:
key: String 存儲(chǔ)到localStorage, sessionStorage 中對(duì)象的key，默認(rèn)為vuex
local: Object 和 session: Object, 分別代表localStorage的配置和sessionStorage的配置
local 和 session 里面可以有: include: Array 和 exclude: Array
配置例子
createPersistedState({
local: {
include: ['count.value']
}
})
/*
hook鉤子觸發(fā)之后，localstorage里面存儲(chǔ)的對(duì)象為:
{
count: {
value: 0,
}
}
*/
createPersistedState({
local: {
exclude: ['count.value']
}
})
/*
hook鉤子觸發(fā)之后，localstorage里面存儲(chǔ)的對(duì)象為:
{
count: {
num: 1
},
pos: 1
}
*/
createPersistedState({
session: {
include: ['count.value']
}
})
/*
hook鉤子觸發(fā)之后，sessionstorage里面存儲(chǔ)的對(duì)象為:
{
count: {
value: 0,
}
}
*/
createPersistedState({
session: {
exclude: ['count.value']
}
})
/*
hook鉤子觸發(fā)之后，sessionstorage里面存儲(chǔ)的對(duì)象為:
{
count: {
num: 1
},
pos: 1
}
*/
createPersistedState({
session: {
include: ['count']
},
local: {
include: ['pos']
}
})
/*
hook鉤子觸發(fā)之后，
sessionstorage里面存儲(chǔ)的對(duì)象為:
{
count: {
value: 0,
num: 1
},
}
sessionstorage里面存儲(chǔ)的對(duì)象為:
{
pos: 0
}
*/
代碼例子
Check out the example on CodeSandbox.
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue之el-form表單校驗(yàn)以及常用正則，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue自定義移動(dòng)端touch事件之點(diǎn)擊、滑動(dòng)、長(zhǎng)按事件
這篇文章主要介紹了vue自定義移動(dòng)端touch事件之點(diǎn)擊、滑動(dòng)、長(zhǎng)按事件的實(shí)例代碼,需要的朋友可以參考下2018-07-07
vue中的計(jì)算屬性的使用和vue實(shí)例的方法示例
本篇文章主要介紹了vue計(jì)算屬性的使用和vue實(shí)例的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Vue的移動(dòng)端多圖上傳插件vue-easy-uploader的示例代碼
這篇文章主要介紹了Vue的移動(dòng)端多圖上傳插件vue-easy-uploader的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue首屏白屏問(wèn)題的原因和解決方法講解，Vue首屏白屏問(wèn)題是指在頁(yè)面初次加載時(shí)，部分或全部?jī)?nèi)容無(wú)法正常顯示，出現(xiàn)空白的情況。其原因可能是因?yàn)轫?yè)面渲染速度過(guò)慢，或者是因?yàn)榫W(wǎng)絡(luò)請(qǐng)求等問(wèn)題導(dǎo)致數(shù)據(jù)無(wú)法及時(shí)加載2023-05-05
這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04
element-ui+vue-treeselect下拉框的校驗(yàn)過(guò)程
這篇文章主要介紹了element-ui+vue-treeselect下拉框的校驗(yàn)過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
el-form-item?prop屬性動(dòng)態(tài)綁定不生效問(wèn)題及解決
這篇文章主要介紹了el-form-item?prop屬性動(dòng)態(tài)綁定不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue.set()動(dòng)態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法
今天小編就為大家分享一篇Vue.set()動(dòng)態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09