要求

• 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