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

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

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

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

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

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

方法

• vuex的state在localstorage或sessionstorage或其它存储方式中取值
• 在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。这样state就会和存储一起存在并且与vuex同步

问题

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

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])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key <string>：存储持久状态的键。（默认：vuex）

paths <array>：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer <function>：一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值。

subscriber <function>：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage <object>：而不是（或与）getstate和setstate。默认为localstorage。

getstate <function>：将被调用以重新水化先前持久状态的函数。默认使用storage。

setstate <function>：将被调用来保持给定状态的函数。默认使用storage。

filter <function>：将被调用来过滤将setstate最终触发存储的任何突变的函数。默认为() => true

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。