用localStorage堅持Vuex狀態----vuex-persistedstate
阿新 • • 發佈:2017-12-12
給定 vue 設置 () re.sub paths sets options imp
要求
- 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的方法是異步的。
用localStorage堅持Vuex狀態----vuex-persistedstate