解決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()]
  })

• 此時可以選擇數據存儲的位置，可以是localStorage/sessionStorage/cookie，此處以存儲到sessionStorage為例，配置如下：
  

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

存儲指定state：

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的幾個模塊，可以自己打印看看。希望哪一部分的數據持久存儲，將數據的名字在此配置就可以，目前我只想持久化存儲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]
})