vuex在F5刷新后，数据初始化的解决方法

页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

为了克服这个问题， vuex-persistedstate出现了~~

原理：

• 将vuex的state存在localStorage或sessionStorage或cookie中一份
• 刷新页面的一瞬间，vuex数据消失，vuex会去Storage中拿数据，变相的实现了数据刷新不丢失~

使用方法：

• 安装：

npm install vuex-persistedstate  --save

• 引入及配置

  在store下的index.js中

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

备注：

上面默认是存储到localStorage里的 ，我们也可以改存到session中，想要存储到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
        }
     }
  })]

还有很多别的设置大家可以看下插件GitHub

https://github.com/robinvdvleuten/vuex-persistedstate