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 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
uniapp实现可滑动选项卡
Oct 21 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
用PHP读取IMAP邮件
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
pandas重新生成索引的方法
2018/11/06 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python文件和文件夹复制函数
2020/02/07 Python
python自定义函数def的应用详解
2020/06/03 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
成人继续教育实施方案
2014/03/01 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
三下乡个人总结
2015/03/04 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书