vuex中數據持久化插件vuex-persistedstate使用

vuex是在中大型項目中必不可少的狀態管理組件，刷新會重新更新狀態，但是有時候我們並不希望如此。例如全局相關的，如登錄狀態、token、以及一些不常更新的狀態等，我們更希望能夠固化到本地，減少無用的接口訪問，以及更佳的用戶體驗。

安裝起步

npm i vuex-persistedstate --save

目前的環境版本：

"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0",
"vuex-persistedstate": "^3.0.1",

vuex已經升級到了3，看了release note沒有發現太過分的升級，預計不會出現不兼容的情況，有感興趣的小夥伴可以升級體驗一下。

配置使用

在vuex初始化時候，作爲組件引入。

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

自定義存儲方式

vuex-persistedstate默認使用localStorage來固化數據，一些特殊情況要如何應對呢？（如：safari的無痕瀏覽模式）

需要使用sessionStorage的情況

plugins: [
    persistedState({ storage: window.sessionStorage })
]

使用cookie的情況

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

 想使用cookie同理

默認持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只儲存state中的assessmentData
          assessmentData: val.assessmentData
        }
     }
  })]

vuex引用多個插件的寫法
譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判斷環境 vuex提示生產環境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一個一維數組不然會解析錯誤