Vuex
是在中大型項(xiàng)目中必不可少的狀態(tài)管理組件,刷新會重新更新狀態(tài)优妙,但是有時候我們并不希望如此乘综。例如全局相關(guān)的,如登錄狀態(tài)套硼、token
卡辰、以及一些不常更新的狀態(tài)等,我們更希望能夠固化到本地邪意,減少無用的接口訪問九妈,以及更佳的用戶體驗(yàn)。頁面刷新后雾鬼,想保存頁面未保存的數(shù)據(jù)萌朱。我們總是習(xí)慣于放在瀏覽器的
sessionStorage
、localStorage
策菜、cookie
中晶疼。但是用了vue
后,vuex
便可以被應(yīng)用了又憨。
- vuex優(yōu)勢: 相比sessionStorage翠霍,存儲數(shù)據(jù)更安全,sessionStorage可以在控制臺被看到蠢莺。
- vuex劣勢: 在F5刷新頁面后寒匙,vuex會重新更新state,所以躏将,存儲的數(shù)據(jù)會丟失锄弱。
手動利用HTML5的本地存儲
vuex
的state
在localStorage
或sessionStorage
或其它存儲方式中取值 在mutations
定義的方法里對vuex
的狀態(tài)操作的同時對存儲也做對應(yīng)的操作考蕾。這樣state
就會和存儲一起存在并且與vuex
同步
問題:最直觀的就是,手動寫比較麻煩
利用vuex-persistedstate插件
vuex
可以進(jìn)行全局的狀態(tài)管理棵癣,但刷新后刷新后數(shù)據(jù)會消失辕翰,這是我們不愿意看到的夺衍。怎么解決呢狈谊,我們可以結(jié)合本地存儲做到數(shù)據(jù)持久化,也可以通過插件vuex-persistedstate插件的原理其實(shí)也是結(jié)合了存儲方式,只是統(tǒng)一的配置就不需要手動每次都寫存儲方法
安裝
npm install vuex-persistedstate --save
// 或
npm i -S vuex-persistedstate
配置使用
在vuex初始化時候沟沙,作為組件引入
// 在store下的index.js中
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})
vuex-persistedstate默認(rèn)使用localStorage來固化數(shù)據(jù)(默認(rèn)存儲于localStorage)
- 存儲sessionStorage的情況(safari的無痕瀏覽模式)
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [
createPersistedState({
storage: window.sessionStorage
})
]
})
- 存儲cookie的情況
import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
// ...
plugins: [
persistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, {
expires: 7
}),
removeItem: key => Cookies.remove(key)
}
})
]
})
默認(rèn)持久化所有state
指定需要持久化的state,配置如下
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [
createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只儲存state中的assessmentData
assessmentData: val.assessmentData
}
}
})
]
})
// vuex引用多個插件的寫法
譬如:vuex提示的插件和持久化的插件一起使用河劝,配置如下
import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判斷環(huán)境 vuex提示生產(chǎn)環(huán)境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
storage: window.sessionStorage
})
export default new Vuex.Store({
// ...
plugins: debug ? [
createLogger(),
createPersisted
] : [
createPersisted
]
})
// plugins要是一個一維數(shù)組不然會解析錯誤
API
createPersistedState([options])使用給定的選項(xiàng)創(chuàng)建插件的新實(shí)例∶希可以提供以下選項(xiàng)來配置您的特定需求的插件:
key :
存儲持久狀態(tài)的鍵赎瞎。
默認(rèn):vuexpaths :
部分持續(xù)狀態(tài)的任何路徑的數(shù)組。如果沒有路徑給出颊咬,完整的狀態(tài)是持久的务甥。
默認(rèn):[]reducer :
一個函數(shù),將被調(diào)用來基于給定的路徑持久化的狀態(tài)喳篇。
默認(rèn):都包含這些值subscriber :
一個被調(diào)用來設(shè)置突變訂閱的函數(shù)敞临。
默認(rèn):store => handler => store.subscribe(handler)storage :
而不是(或與)getState和setState。
默認(rèn):localStoragegetState :
將被調(diào)用以重新水化先前持久狀態(tài)的函數(shù)麸澜。
默認(rèn):storagesetState :
將被調(diào)用來保持給定狀態(tài)的函數(shù)挺尿。
默認(rèn):storagefilter :
將被調(diào)用來過濾將setState最終觸發(fā)存儲的任何突變的函數(shù)。
默認(rèn):() => true