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


Posted in Javascript onApril 16, 2019

页面刷新后,想保存页面未保存的数据。我们总是习惯于放在浏览器的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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
javascript中如何判断类型汇总
May 14 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 #Javascript
一些手写JavaScript常用的函数汇总
Apr 16 #Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 #Javascript
理理Vue细节(推荐)
Apr 16 #Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 #Javascript
js实现删除li标签一行内容
Apr 16 #Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 #Javascript
You might like
php操作excel文件 基于phpexcel
2010/07/02 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
33道php常见面试题及答案
2015/07/06 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python协程之动态添加任务的方法
2019/02/19 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python开启debug模式的方法
2019/06/27 Python
python实现用户名密码校验
2020/03/18 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
敬老文明号事迹材料
2014/01/16 职场文书
教育科研先进个人材料
2014/01/26 职场文书
教师个人鉴定材料
2014/02/08 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
python运算符之与用户交互
2022/04/13 Python
React更新渲染原理深入分析
2022/12/24 Javascript