Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

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

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

1.手动利用HTML5的本地存储

方法

问题

最直观的就是，手动写比较麻烦。

2.利用vuex-persistedstate插件

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

使用方法

安装

npm install vuex-persistedstate --save

引入及配置

在store下的index.js中

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

默认存储到localStorage

想要存储到sessionStorage，配置如下

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

想使用cookie同理

默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({ // ... plugins: [createPersistedState({  storage: window.sessionStorage,  reducer(val) {   return {   // 只储存state中的assessmentData   assessmentData: val.assessmentData  }  } })]

vuex引用多个插件的写法

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

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

plugins要是一个一维数组不然会解析错误

API

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：