vuex-persistedstate將vuex本地存儲(chǔ)

使用場(chǎng)景

最近在做Vue項(xiàng)目中的登錄模塊，登陸成功后獲取到token，將token存儲(chǔ)在vuex中，然而我發(fā)現(xiàn)切換路由后vuex中的數(shù)據(jù)都恢復(fù)默認(rèn)了，原來(lái)頁(yè)面刷新之后vuex的數(shù)據(jù)都會(huì)恢復(fù)默認(rèn)。而后面進(jìn)行鑒權(quán)處理需要token，于是我們要將vuex中的數(shù)據(jù)進(jìn)行本地存儲(chǔ)。

這里就用到了vuex持久化插件vuex-persistedstate

Vuex-persistedstate

這個(gè)插件的原理結(jié)合了存儲(chǔ)方式，只是統(tǒng)一配置后就不需要手動(dòng)寫(xiě)存儲(chǔ)方法了

使用方法：

安裝

npm install vuex-persistedstate --save

在store下的index.js中引入配置

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({ ?
? ? state: { ?}, ?
? ? mutations: { ?}, ?
? ? actions: { ?}, ?
? ? modules: { ?}, ?
? ? plugins: [ ? ?
? ? ? ? createPersistedState(), ?
? ? ],
})

這樣是默認(rèn)存儲(chǔ)到localStorage，如果想要存儲(chǔ)到sessionStorage，配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({ ?
? ? state: { ?}, ?
? ? mutations: { ?}, ?
? ? actions: { ?}, ?
? ? modules: { ?}, ?
? ? plugins: [ ? ?
? ? ? ? // 把vuex的數(shù)據(jù)存儲(chǔ)到sessionStorage ? ?
? ? ? ? createPersistedState({ ? ? ?
? ? ? ? ? ? storage: window.sessionStorage, ? ?
? ? ? ? }), ?
? ? ],
})

默認(rèn)持久化所有的state，如果想要存儲(chǔ)指定的state，配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({ ?
? ? state: { ?}, ?
? ? mutations: { ?}, ?
? ? actions: { ?}, ?
? ? modules: { ?}, ?
? ? plugins: [ ? ?
? ? ? ? // 把vuex的數(shù)據(jù)存儲(chǔ)到sessionStorage ? ?
? ? ? ? createPersistedState({ ? ? ?
? ? ? ? ? ? storage: window.sessionStorage, ? ? ?
? ? ? ? ? ? reducer(val) { ? ? ? ?
? ? ? ? ? ? ? ? return { ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? // 只存儲(chǔ)state中的userData ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? userData: val.userData ? ? ? ?
? ? ? ? ? ? ? ? } ? ? ?
? ? ? ? ? ? } ? ?
? ? ? ? }), ?
? ? ],
})

API

• key：存儲(chǔ)持久狀態(tài)的key（默認(rèn)vuex）
• paths：部分持續(xù)狀態(tài)的任何路徑的數(shù)組。如果沒(méi)有路徑給出，完整的狀態(tài)是持久的。（默認(rèn)：[]）
• reducer：一個(gè)函數(shù)，將被調(diào)用來(lái)基于給定的路徑持久化的狀態(tài)。默認(rèn)包含這些值。
• subscriber：一個(gè)被調(diào)用來(lái)設(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)用來(lái)保持給定狀態(tài)的函數(shù)。默認(rèn)使用storage。
• filter：將被調(diào)用來(lái)過(guò)濾將setState最終觸發(fā)存儲(chǔ)的任何突變的函數(shù)。默認(rèn)為() => true

vuex的本地存儲(chǔ)

vuex是什么

Vuex是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式

vuex就是一個(gè)倉(cāng)庫(kù) 眾所周知就是存放公共數(shù)據(jù)的一個(gè)地方 任何組件內(nèi)的都可以使用vuex中的數(shù)據(jù)

vuex中的五大核心

• State

存放Vuex store實(shí)例的狀態(tài)對(duì)象，用于定義共享的數(shù)據(jù)， 以及設(shè)定的變量

• Action

向store發(fā)出調(diào)用通知，去執(zhí)行異步操作

• Mutations

它只用于修改state中定義的狀態(tài)變量 ， 相當(dāng)于vue當(dāng)中methods 來(lái)進(jìn)行邏輯的代碼操作

• Modules

對(duì)state進(jìn)行分類處理，相當(dāng)于模塊

• getters

外部程序通過(guò)它獲取變量的具體值，或者在取值前做一些計(jì)算（可以認(rèn)為是store的計(jì)算屬性）

• plugins

這個(gè)是數(shù)組展示 而不是以對(duì)象形式展示 ，數(shù)組當(dāng)中是對(duì)象的形式 數(shù)組當(dāng)中存放vuex的本地存儲(chǔ)

• vuex-persist

是vuex是一個(gè)插件 數(shù)據(jù)的緩存， 跟localStorage是一個(gè)本質(zhì)的意思，將數(shù)據(jù)存儲(chǔ)在用戶的本地，當(dāng)然這個(gè)插件的特性只能在vuex當(dāng)中使用，在vue中就使用不了

那么 vuex-persist 如何使用

在終端當(dāng)中下載

cnpm install vuex-persist -save

下載完成后 還需要在vuex當(dāng)中引入

import vuexPersist from 'vuex-persist';

引入之后需要在 export default 當(dāng)中 實(shí)例化出

plugins:[
?? ?new vuexPersist({
?? ??? ?localstorage:window.localStorage,
?? ?}).plugin,
],

new 一個(gè)對(duì)象出 對(duì)象中寫(xiě)入 localStorage

new 出的對(duì)象需要跟引入的 名字相同

當(dāng)然vuex的本地存儲(chǔ)還有一種方式

以上方式相對(duì)來(lái)說(shuō)復(fù)雜

在終端當(dāng)中直接下載

cnpm install vuex-persistedstate -save

在plugins 中直接調(diào)用即可 這種方法先對(duì)簡(jiǎn)單 不需要再去new一下

plugins: [
Persist()
]

關(guān)于vuex的本地存儲(chǔ)就是這些。以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論