Vuex持久化插件(vuex-persistedstate)-解決刷新數據消失的問題

vuex能夠進行全局的狀態管理，但刷新後刷新後數據會消失，這是咱們不肯意看到的。怎麼解決呢，咱們能夠結合本地存儲作到數據持久化，也能夠經過插件-vuex-persistedstate。

1.手動利用HTML5的本地存儲

方法

• vuex的state在localStorage或sessionStorage或其它存儲方式中取值
• 在mutations,定義的方法裏對vuex的狀態操做的同時對存儲也作對應的操做。 這樣state就會和存儲一塊兒存在而且與vuex同步

問題

• 最直觀的就是，手動寫比較麻煩。

2.利用vuex-persistedstate插件

插件的原理其實也是結合了存儲方式,只是統一的配置就不須要手動每次都寫存儲方法

使用方法

安裝

npm install vuex-persistedstate --save
複製代碼

引入及配置

在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})
複製代碼

默認存儲到localStorage

想要存儲到sessionStorage，配置以下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})
複製代碼

想使用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要是一個一維數組否則會解析錯誤