解决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] }) 复制代码