怎么利用vuex-persistedstate將vuex本地存儲

本篇內容主要講解“怎么利用vuex-persistedstate將vuex本地存儲”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么利用vuex-persistedstate將vuex本地存儲”吧!

vuex-persistedstate將vuex本地存儲

使用場景

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

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

Vuex-persistedstate

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

使用方法：

安裝

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的數據存儲到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的數據存儲到sessionStorage    
        createPersistedState({      
            storage: window.sessionStorage,      
            reducer(val) {        
                return {          
                    // 只存儲state中的userData          
                    userData: val.userData        
                }      
            }    
        }),  
    ],
})

API

• key：存儲持久狀態的key（默認vuex）

• paths：部分持續狀態的任何路徑的數組。如果沒有路徑給出，完整的狀態是持久的。（默認：[]）

• reducer：一個函數，將被調用來基于給定的路徑持久化的狀態。默認包含這些值。

• subscriber：一個被調用來設置突變訂閱的函數。默認為store => handler => store.subscribe(handler)

• storage：而不是（或與）getState和setState。默認為localStorage。

• getState：將被調用以重新水化先前持久狀態的函數。默認使用storage。

• setState：將被調用來保持給定狀態的函數。默認使用storage。

• filter：將被調用來過濾將setState最終觸發存儲的任何突變的函數。默認為() => true

vuex的本地存儲

vuex是什么

Vuex是一個專為 Vue.js 應用程序開發的狀態管理模式

vuex就是一個倉庫 眾所周知就是存放公共數據的一個地方 任何組件內的都可以使用vuex中的數據

vuex中的五大核心

• State

存放Vuex store實例的狀態對象，用于定義共享的數據， 以及設定的變量

• Action

向store發出調用通知，去執行異步操作

• Mutations

它只用于修改state中定義的狀態變量 ， 相當于vue當中methods 來進行邏輯的代碼操作

• Modules

對state進行分類處理，相當于模塊

• getters

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

• plugins

這個是數組展示 而不是以對象形式展示 ，數組當中是對象的形式 數組當中存放vuex的本地存儲

• vuex-persist

是vuex是一個插件 數據的緩存， 跟localStorage是一個本質的意思，將數據存儲在用戶的本地，當然這個插件的特性只能在vuex當中使用，在vue中就使用不了

那么 vuex-persist 如何使用

在終端當中下載

cnpm install vuex-persist -save

下載完成后 還需要在vuex當中引入

import vuexPersist from 'vuex-persist';

引入之后需要在 export default 當中 實例化出

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

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

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

當然vuex的本地存儲還有一種方式

以上方式相對來說復雜

在終端當中直接下載

cnpm install vuex-persistedstate -save

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

plugins: [
Persist()
]

到此，相信大家對“怎么利用vuex-persistedstate將vuex本地存儲”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！