頁面刷新時vuex數據持久化問題的解決方案

vuex是在中大型項目中必不可少的狀態管理組件，刷新會從新更新狀態，可是有時候咱們並不但願如此。例如全局相關的，如登陸狀態、token、以及一些不常更新的狀態等，咱們更但願可以固化到本地，減小無用的接口訪問，以及更佳的用戶體驗。

用法

安裝:

npm install vuex-persistedstate --save

vuex初始化就開始引入：

每次咱們更新vuex的狀態，localstorage中的vuex也會隨之改變.

vuex-persistedstate默認使用localStorage來固化數據.

自定義存儲方式

使用sessionStorage

plugins: [
 persistedState({ storage: window.sessionStorage })
]

使用cookie

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
const store = new Store({
 // ...
 plugins: [
 createPersistedState({
 storage: {
 getItem: key => Cookies.get(key),
 setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
 removeItem: key => Cookies.remove(key)
 }
 })
 ]
})

 

vuex-persistedstate文檔

createPersistedState([options])

使用給定的選項建立插件的新實例。能夠提供如下選項來配置您的特定需求的插件：

key <String>：存儲持久狀態的鍵。（默認：vuex）

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

reducer <Function>：一個函數，將被調用來減小基於給定的路徑持久化的狀態。默認包含這些值。

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

storage <Object>：而不是（或與）getState和setState。默認爲localStorage。

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

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

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

gitHub地址：https://github.com/robinvdvleuten/vuex-persistedstate