接觸Vuex也有一段時(shí)間，之前也遇到過刷新之后Vuex丟失的問題越平。
因?yàn)閂uex也是js,存在于內(nèi)存中匈庭，刷新瀏覽器的話會(huì)導(dǎo)致js重新加載，Vuex的Store全部重置, 所以為了防止這類情況的發(fā)生的話甜攀，一般來說我們會(huì)用localStorage對(duì)vuex進(jìn)行一個(gè)存儲(chǔ)秋泄，防止Vuex丟失的情況。
但是這樣的話规阀，我們就會(huì)面臨一個(gè)問題恒序，就是每次進(jìn)行Store的狀態(tài)變化時(shí)，都要手動(dòng)存儲(chǔ)下姥敛，很麻煩 所以不妨試試通過編寫Vuex的插件來完成這個(gè)Vuex狀態(tài)持久化的功能
首先
- 我們來看下Vuex的插件的寫法
const myPlugin = store => {
// 當(dāng) store 初始化后調(diào)用
store.subscribe((mutation, state) => {
// 每次 mutation 之后調(diào)用
// mutation 的格式為 { type, payload }
})
}
其實(shí)挺簡單的奸焙，就兩個(gè)
- 第一個(gè)就是在Store初始化的時(shí)候可以進(jìn)行函數(shù)調(diào)用
- 第二個(gè)就是在mutation之后可以進(jìn)行函數(shù)調(diào)用
借用這兩個(gè)，其實(shí)就可以實(shí)現(xiàn)一個(gè)簡單的vuex狀態(tài)持久化功能了彤敛，下面貼一下代碼
const handleStore = store => {
if (localStorage.store) store.replaceState(JSON.parse(localStorage.store)) // 初始化store
store.subscribe((mutation, state) => {
localStorage.setItem("store", JSON.stringify(state))
})
}
// 然后在new Vuex的時(shí)候進(jìn)行調(diào)用
const store = new Vuex.Store({
state,
mutations,
plugins: [handleStore]
})
當(dāng)然這個(gè)是最簡單的版本与帆，還可以加一些白名單，時(shí)間戳之類的墨榄，這樣的話更加顆列悖化，主要是提供一個(gè)思路
