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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
javascript常用方法汇总
Dec 02 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
理解javascript闭包
Dec 15 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
详解vue中组件参数
Jul 09 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
详解滑动穿透(锁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 类型转换函数intval
2009/06/20 PHP
服务器web工具 php环境下
2010/12/29 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
python使用turtle库与random库绘制雪花
2018/06/22 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
2015年度合同管理工作总结
2015/05/22 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记