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
