資訊專欄INFORMATION COLUMN
摘要：眾所周知，的一個全局狀態(tài)管理的插件，但是在瀏覽器刷新的時候，內(nèi)存中的會釋放，通常的解決辦法就是用本地存儲的方式保存數(shù)據(jù)，然后再初始化的時候再賦值給，手動存再手動取會覺得很麻煩，這個時候就可以使用的插件插件地址歡迎插件原理有一個方法每次在
眾所周知，vuex的一個全局狀態(tài)管理的插件，但是在瀏覽器刷新的時候，內(nèi)存中的state會釋放，通常的解決辦法就是用本地存儲的方式保存數(shù)據(jù)，然后再vuex初始化的時候再賦值給state，手動存再手動取會覺得很麻煩，這個時候就可以使用vuex的插件vuex-solidification
插件地址: vuex-solidification , 歡迎star
插件原理vuex有一個hook方法：store.subscribe((mutation, state) => {}) 每次在mutation方法執(zhí)行完之后都會調(diào)用這個回調(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: [ // 默認存儲所有state數(shù)據(jù)到localstorage
createPersistedState()
]
});
插件參數(shù)說明
createPersistedState({options}) : Function
options里面可以有:
key: String 存儲到localStorage, sessionStorage 中對象的key，默認為vuex
local: Object 和 session: Object, 分別代表localStorage的配置和sessionStorage的配置
local 和 session 里面可以有: include: Array 和 exclude: Array
配置例子createPersistedState({
local: {
include: ["count.value"]
}
})
/*
hook鉤子觸發(fā)之后，localstorage里面存儲的對象為:
{
count: {
value: 0,
}
}
*/
createPersistedState({
local: {
exclude: ["count.value"]
}
})
/*
hook鉤子觸發(fā)之后，localstorage里面存儲的對象為:
{
count: {
num: 1
},
pos: 1
}
*/
createPersistedState({
session: {
include: ["count.value"]
}
})
/*
hook鉤子觸發(fā)之后，sessionstorage里面存儲的對象為:
{
count: {
value: 0,
}
}
*/
createPersistedState({
session: {
exclude: ["count.value"]
}
})
/*
hook鉤子觸發(fā)之后，sessionstorage里面存儲的對象為:
{
count: {
num: 1
},
pos: 1
}
*/
createPersistedState({
session: {
include: ["count"]
},
local: {
include: ["pos"]
}
})
/*
hook鉤子觸發(fā)之后，
sessionstorage里面存儲的對象為:
{
count: {
value: 0,
num: 1
},
}
sessionstorage里面存儲的對象為:
{
pos: 0
}
*/
代碼例子
Check out the example on CodeSandbox.
寫在最后歡迎交流，提issue和pr，
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103487.html
摘要：可以進行全局的狀態(tài)管理，但刷新后刷新后數(shù)據(jù)會消失，這是我們不愿意看到的。怎么解決呢，我們可以結(jié)合本地存儲做到數(shù)據(jù)持久化，也可以通過插件。 vuex可以進行全局的狀態(tài)管理，但刷新后刷新后數(shù)據(jù)會消失，這是我們不愿意看到的。怎么解決呢，我們可以結(jié)合本地存儲做到數(shù)據(jù)持久化，也可以通過插件-vuex-persistedstate。 歡迎來點點我的個人博客showImg(https://user-...
摘要：接下來我們會從上述兩個功能點出發(fā)，完成一個持久化插件。在我們的持久化插件中，就是在這個函數(shù)內(nèi)部對數(shù)據(jù)進行持久化操作。而則整個被監(jiān)聽，所以任何對于的改動都會被持久化并能夠被恢復(fù)。 在做 Vue 相關(guān)項目的時候，總會遇到因為頁面刷新導(dǎo)致 Store 內(nèi)容丟失的情況。復(fù)雜的項目往往涉及大量的狀態(tài)需要管理，如果僅因為一次刷新就需要全部重新獲取，代價也未免太大了。 那么我們能不能對這些狀態(tài)進行本...
摘要：先說點什么和路由攔截這一塊搗鼓的有一段時間了總算是爬出來了特地來分享一下首先聲明沒有什么基礎(chǔ)介紹用的是登錄狀態(tài)存儲的方法進入正題刷新刷新相當(dāng)與重啟項目，之前獲取到的數(shù)據(jù)也只是通過暫存起來，項目關(guān)閉時就不見了，這有些像電腦重啟，存儲在的數(shù)據(jù)會 先說點什么 vuex和路由攔截這一塊搗鼓的有一段時間了,總算是爬出來了,特地來分享一下,首先聲明沒有什么基礎(chǔ)介紹,用的是登錄狀態(tài)存儲session...
閱讀 2014·2021-11-15 11:38
閱讀 2048·2019-08-30 15:55
閱讀 2182·2019-08-30 15:52
閱讀 3167·2019-08-30 14:01
閱讀 2684·2019-08-30 12:47
閱讀 1128·2019-08-29 13:17
閱讀 1062·2019-08-26 13:55
閱讀 2629·2019-08-26 13:46
