Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

1.png

2.png

原来是这个插件报错，后来再次寻找Vue持久化存储插件找到了 vuex-persistedstate 这个插件，就抱着试一试的心态看看是否有用，后来发现IE浏览器能够打开，页面刷新数据也不会丢失

使用方法

安装

npm install vuex-persistedstate --save

引入及配置

在store下的index.js中

import persistedState from 'vuex-persistedstate'

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

默认存储到localStorage
想要存储到sessionStorage，配置如下

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