Vuex持久化插件:vuex-persistedstate

Vuex是在中大型項(xiàng)目中必不可少的狀態(tài)管理組件,刷新會重新更新狀態(tài)优妙,但是有時候我們并不希望如此乘综。例如全局相關(guān)的,如登錄狀態(tài)套硼、token卡辰、以及一些不常更新的狀態(tài)等,我們更希望能夠固化到本地邪意,減少無用的接口訪問九妈,以及更佳的用戶體驗(yàn)。

頁面刷新后雾鬼,想保存頁面未保存的數(shù)據(jù)萌朱。我們總是習(xí)慣于放在瀏覽器的sessionStoragelocalStorage策菜、cookie中晶疼。但是用了vue后,vuex便可以被應(yīng)用了又憨。

  • vuex優(yōu)勢: 相比sessionStorage翠霍,存儲數(shù)據(jù)更安全,sessionStorage可以在控制臺被看到蠢莺。
  • vuex劣勢: 在F5刷新頁面后寒匙,vuex會重新更新state,所以躏将,存儲的數(shù)據(jù)會丟失锄弱。

手動利用HTML5的本地存儲

vuexstatelocalStoragesessionStorage或其它存儲方式中取值 在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):vuex

  • paths : 部分持續(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):localStorage

  • getState : 將被調(diào)用以重新水化先前持久狀態(tài)的函數(shù)麸澜。
    默認(rèn):storage

  • setState : 將被調(diào)用來保持給定狀態(tài)的函數(shù)挺尿。
    默認(rèn):storage

  • filter : 將被調(diào)用來過濾將setState最終觸發(fā)存儲的任何突變的函數(shù)。
    默認(rèn):() => true

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末炊邦,一起剝皮案震驚了整個濱河市编矾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌馁害,老刑警劉巖窄俏,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異碘菜,居然都是意外死亡凹蜈,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門炉媒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來踪区,“玉大人,你說我怎么就攤上這事吊骤《懈冢” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵白粉,是天一觀的道長传泊。 經(jīng)常有香客問我鼠渺,道長,這世上最難降的妖魔是什么眷细? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任拦盹,我火速辦了婚禮,結(jié)果婚禮上溪椎,老公的妹妹穿的比我還像新娘普舆。我一直安慰自己,他們只是感情好校读,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布沼侣。 她就那樣靜靜地躺著,像睡著了一般歉秫。 火紅的嫁衣襯著肌膚如雪蛾洛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天雁芙,我揣著相機(jī)與錄音轧膘,去河邊找鬼。 笑死兔甘,一個胖子當(dāng)著我的面吹牛谎碍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播裂明,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼椿浓,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了闽晦?” 一聲冷哼從身側(cè)響起扳碍,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎仙蛉,沒想到半個月后笋敞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡荠瘪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年夯巷,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哀墓。...
    茶點(diǎn)故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡趁餐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出篮绰,到底是詐尸還是另有隱情后雷,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站臀突,受9級特大地震影響勉抓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜候学,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一藕筋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧梳码,春花似錦隐圾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至符匾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瘩例,已是汗流浹背啊胶。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留垛贤,地道東北人焰坪。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像聘惦,于是被迫代替她去往敵國和親某饰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容