用localStorage堅持Vuex狀態----vuex-persistedstate

要求

• Vue.js（v2.0.0 +）
• Vuex（v2.0.0 +）

安裝

$ 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的方法是異步的。