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

利用vuex進行全局狀態管理的時候，刷新頁面數據會丟失，如何解決這樣的問題呢？可以通過插件vuex-persistedstate來解決。

1、安裝

npm install vuex-persistedstate --save

2、引入及配置

在store的index.js文件中

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  ...
  plugins: [createPersistedState()]
})


以上默認是以localStorage的方式存儲，如果想用sessionStorage方式存儲，請使用以下方式：

const store = new Vuex.Store({
  ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

   默認持久化所有state，要想持久化指定state，配置如下：

 

const store = new Vuex.Store({
  ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,

　　　 reducer(val) {
          return {
            // 只儲存state中的user
            user: val.user
          }
      }

  })]
})