vuex組件 vuex-persistedstate

vuex用於管理項目中的全局狀態，但是我們一刷新vuex中保存的全局狀態就會被全部初始化，雖然我們也可以同事緩存到storage中做兩步操作，但是vuex-persistedstate組件已經幫我們完成了同步更新

npm install vuex-persistedstate --save

然后用vuex中的plugins屬性掛載

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({

  state,

  mutations,

  getters,

  plugins: [createPersistedState()]

})

在我們的localstorage中就會看到有一個vuex的key，值為{"showLogin":false,"navIndex":true,"token":"64c9bbf8541b47af8d891b20247ae6a3","nickName":"百寶箱","updataCart":false,"showLoading":false}的字符串的JSON數據

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

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等）的對象：

// 用sessionStorage替換localStorage
createPersistedState({ storage: window.sessionStorage })