要求
安裝
$ npm install vuex-persistedstate--save-dev
用法
import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ...這樣配置表示把VUEX中的所有數據存到localStorage中
plugins: [createPersistedState()] })API
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
自定義存儲
如果在本地存儲中存儲Vuex存儲的狀態並不理想。人們可以輕松地實現功能使用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) } }) ] })實際上，可以傳遞任何遵循存儲協議（getItem，setItem，removeItem等）的對象：
createPersistedState({ storage: window.sessionStorage })當你將這個插件與服務器端渲染結合使用時，這是非常有用的，在這里可以傳遞一個dom-storage的實例。
Local️LocalForage⚠️
因為它可能看起來乍一看，它不可能作為屬性傳遞一個LocalForage實例storage。這是因為所有的getter和setter必須是同步的，LocalForage的方法是異步的。