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

在之前的開發中，咱們老是習慣於放在瀏覽器的sessionStorage和localStorage中。可是用了vue後，vuex即可以被應用了。

優勢：vuex相對sessionStorage，存儲數據更安全，sessionStorage可在瀏覽器控制檯看到
缺點：在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 })] })

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

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

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] }) 複製代碼