解決Vuex持久化插件-在F5刷新頁面後數據不見的問題

頁面刷新後，想保存頁面未保存的數據。咱們老是習慣於放在瀏覽器的sessionStorage和localStorage中。可是用了vue後，vuex即可以被應用了。

vuex優點：相比sessionStorage，存儲數據更安全，sessionStorage能夠在控制檯被看到。

vuex劣勢：在F5刷新頁面後，vuex會從新更新state，因此，存儲的數據會丟失。

爲了克服這個問題， vuex-persistedstate出現了~~

原理：

• 將vuex的state存在localStorage或sessionStorage或cookie中一份
• 刷新頁面的一瞬間，vuex數據消失，vuex回去sessionStorage中哪會數據，變相的實現了數據刷新不丟失~

使用方法：

• 安裝：

npm install vuex-persistedstate  --save

• 引入及配置

           在store下的index.js中

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

想要存儲到sessionStorage，配置以下：

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

 想使用cookie或localStorage同理 

vuex-persistedstate默認持久化全部state，指定須要持久化的state,配置以下：

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

此刻的val 對應store/modules文件夾下幾個js文件存儲的內容，也就是stor/index中import的9個模塊，但願哪一部分的數據持久存儲，將數據的名字在此配置就能夠，目前我只想持久化存儲user模塊的數據。文件夾目錄以下：

 

注意：若是此刻想配置多個選項，將plugins寫成一個一維數組，否則會報錯。

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]
})