vuex-persistedstate將vuex本地存儲

使用場景

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

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

Vuex-persistedstate

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

使用方法：

安裝

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(), ?
? ? ],
})

這樣是默認存儲到localStorage，如果想要存儲到sessionStorage，配置如下

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

默認持久化所有的state，如果想要存儲指定的state，配置如下

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

API

• key：存儲持久狀態(tài)的key（默認vuex）
• paths：部分持續(xù)狀態(tài)的任何路徑的數(shù)組。如果沒有路徑給出，完整的狀態(tài)是持久的。（默認：[]）
• reducer：一個函數(shù)，將被調(diào)用來基于給定的路徑持久化的狀態(tài)。默認包含這些值。
• subscriber：一個被調(diào)用來設(shè)置突變訂閱的函數(shù)。默認為store => handler => store.subscribe(handler)
• storage：而不是（或與）getState和setState。默認為localStorage。
• getState：將被調(diào)用以重新水化先前持久狀態(tài)的函數(shù)。默認使用storage。
• setState：將被調(diào)用來保持給定狀態(tài)的函數(shù)。默認使用storage。
• filter：將被調(diào)用來過濾將setState最終觸發(fā)存儲的任何突變的函數(shù)。默認為() => true

vuex的本地存儲

vuex是什么

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

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

vuex中的五大核心

• State

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

• Action

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

• Mutations

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

• Modules

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

• getters

外部程序通過它獲取變量的具體值，或者在取值前做一些計算（可以認為是store的計算屬性）

• plugins

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

• vuex-persist

是vuex是一個插件 數(shù)據(jù)的緩存， 跟localStorage是一個本質(zhì)的意思，將數(shù)據(jù)存儲在用戶的本地，當(dāng)然這個插件的特性只能在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)中 實例化出

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

new 一個對象出 對象中寫入 localStorage

new 出的對象需要跟引入的 名字相同

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

以上方式相對來說復(fù)雜

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

cnpm install vuex-persistedstate -save

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

plugins: [
Persist()
]

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