vuex持久化

news/2024/3/29 14:35:06/文章来源:https://blog.csdn.net/a1598452168YY/article/details/128260212

下载: vuex-persistedstate

npm install --save vuex-persistedstate

或者:

npm install --save vuex-persistedstate --legacy-peer-deps

引入使用在store文件夹下的index文件中,也就是放vuex的js代码中引入:

import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({//...plugins: [createPersistedState()]
}

使用的情景:

使用vuex持久化的情景是:看上面这个图,刚开始的数据是上海的电影院数据,后面当我们切换了地区,切换成“安阳”,数据变成了安阳区的电影院,但是让我们刷新一下页面,数据又变成了上海的,但是我们想要的效果是,当刷新页面,数据还是安阳的,所以就用到了vuex的持久化。

vuex持久化的原理是:

  • 每次往vuex中缓存新请求来的数据时候,这个小插件都会往Local Storage中存一份;

当我们把vuex持久化需要的东西引入,再来切换一下地区,刷新一下页面,定位数据就会停留在当前的定位了:

原理的体现:

  • 当我们运用上vuex持久化,再切换到“鞍山”,就会有一份数据也存到Local Storage中存一份了:

  • 图中它是把  cinemaList 、cityId、cityName、isTabbarShow数据都给存在来了;
  • 我们也可以控制它只存哪些数据,哪些数据不存;
  • 方式是:在reducer里规定
plugins: [createPersistedState({reducer: (state) => {return {cityId: state.cityId,cityName: state.cityName}}})]
  • 给 createPersistedState 传一个对象;
  • 键是reducer,值是一个回调函数,参数是state;
  • 回调函数要有返回值return,返回的是要存储的状态;

结果:

持久化的效果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_233633.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dell电脑搭配Win10休眠 = 黑屏

应该是Dell的硬件和win10操作系统的适配性不行。 Dell黑屏现象 刚买Dell笔记本的时候,就有“黑屏”问题。刚买的一个周、一个月、一年、两年都有这样的问题,而且一个月至少发生一次: 摁了开机键,也开机成功了,电脑就…

【STM32】详解嵌入式中FLASH闪存的特性和代码示例

一、存储器 我们正常编译生成的二进制文件,需要下载烧录到单片机里面去,这个文件保存在单片机的ROM(read only memory)中,所有可以完成这种特性的存储介质都可以称为ROM。 分类 ROM一般分为四大类 ①PROM:可编程只读存储器&#…

Java学习之equals方法练习

目录 第一题 题目要求 我的代码 创建Person类 main类 结果 重写equals 重写后的结果 老师代码 思路 结果 总结 Interger类 源代码 String类 源代码 第二题 运行结果 第三题 知识点 运行结果 第一题 题目要求 判断两个 Person 对象的内容是否相等,…

m基于PSO粒子群算法的重采样算法仿真,对比随机重采样,多项式重采样,分层重采样,系统重采样,残差重采样,MSV重采样

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 重采样的主要方法有随机重采样,多项式重采样,分层重采样,系统重采样,残差重采样,MSV重采样等。 a.随机采样是一种利用分层统计思想设计出来的,将空间均匀划分,粒子打点后…

青龙面板 香蕉

香蕉角本教程 介绍 香蕉视频 app —【多用户版】 一个账户每天稳定1元,可以自己提现,也可以兑换会员,脚本不停会员也不停!可注册多个账户!(多账户福利自行看文章底部!) 拉取文件 …

PLC-Recorder实现速度高达0.24ms准确周期采集的方法(带时间戳采集)

目录 1、PLC的发送程序 2、PLC连接配置 3、PLC-Recorder侧的通讯设置 4、PLC-Recorder的通道配置 5、PLC-Recorder的变量配置 6、正常通讯情况的界面 7、记录数据的情况 8、小结 如果要以非常高的速度高速采集各种控制器(典型的是PLC)的数据&…

攻击类型的攻击次数分布

攻击类型分析 2018 年,主要的攻击类型 1 为 SYN Flood,UDP Flood,ACK Flood,HTTP Flood,HTTPS Flood, 这五大类攻击占了总攻击次数的 96%,反射类攻击不足 3%。和 2017 年相比&…

windows下node.js通过N-API调用c++函数

环境准备 vscode安装(以下均在vscode中操作)node.js安装,版本不要太老c工具链安装,安装Visual Studio2019社区版即可,或者执行 npm install --global windows-build-tools(这个我没试过,window…

无需代理及注册在VsCode中使用ChatGPT

无需代理及注册在VsCode中使用ChatGPT 安装 要安装扩展,请按照下列步骤操作: 1.打开 Visual Studio Code 2.单击左侧栏中的扩展程序图标 3.搜索"ChatGPT中文版" 4.点击安装按钮安装扩展 5.重启VSCode 用法 开始使用 在编辑器中右键触发…

mac m1 安装docker docker 安装php 5.6 和 7.2 避坑指南

注意:这个docker一旦下载用起来,没事不要升级,容易导致APP挂载目录找不到,重装非常浪费时间 通过该link可以下载兼容mac m1核心的docker-desktop: Docker Desktop - Docker 所有基于amd64架构核心的都加上--platform linux/amd6…

IEEE 二进制浮点数的表示

今天,我来将 IEEE 二进制浮点数的表示方式进行一个简单的介绍。 浮点数 在 C 语言中,有两种存储浮点数的方式,分别是 float 和 double ,当然了还有long double。这几种浮点型所容纳的长度不同,当然它们存储的精度也就…

springBoot中日志的使用

springBoot中日志的使用 日志基础 首先你需要知道日志门面,日志实现,日志桥接器。 基于日志实现,常用的有logback,log4j2,这两个日志实现是的创始人是同一个,概念差不多,这里以log4j2为例,有如…

经矩形窗截断的信号频谱泄露现象研究-附Matlab代码

⭕⭕ 目 录 ⭕⭕✳️ 一、频谱泄露现象✳️ 二、原因分析以及解决方法✳️ 三、Matlab程序获取与验证✳️ 一、频谱泄露现象 有一个余弦信号,信号频率30Hz,信号为x(t)cos(2π30t),采样频率fs128Hz,样本长度分别取N128和N100&…

Android 使用 jni Demo示例

Android 使用 jni Demo示例简介1. NDK的介绍1.1 NDK 简介1.2 NDK 特点2. JNI介绍2.1 JNI 简介2.2 为什么要有 JNI?3. NDK 与 JNI 的关系NDK下载及环境配置1. 使用Android studio SDK Manager下载2.配置NDK2.1 配置环境变量2.2 Android studio配置NDK示例Demo流程1.版…

【云原生】devops之jenkins中pipeline语法(2)

前言: pipeline语法分类一般来说,有四种。分别是环境配置、阶段步骤、行为动作、逻辑判断。 二、阶段步骤 (1)post 根据pipeline块或者stage块(阶段)完成的状态来进行一个或者多个附加步骤(取决…

Gaussian 计算静电云图确定吸附位点

计算背景: 利用高分子有机物等活性材料对有毒分子、原子、离子在真空、水溶液、有机溶液等环境下吸附,已是当今环境科学、矿物学、土壤化学等学科领域研究的热点。但如何确定最佳吸附位点以计算其吸附能就显得尤为重要。 现阶段多数物质的吸附均依据粒…

【通信基础】TTL、RS232、RS485

TTL1、TTL简介RS2321、RS232基本概念2、DB9串口定义及接线参考3、RS232经典电路4、特点RS4851、RS485简介2、特点3、传输距离4、经典电路5、传输差分电平信号TTL 1、TTL简介 TTL的英文全称是Transisor-Transisor Logic. 翻译过来就是晶体管与晶体管之间的逻辑电路。 TTL电平信…

Java搭建宝塔部署实战毕设项目springboot销售培训考评系统源码

大家好啊,我是测评君,欢迎来到web测评。 本期给大家带来一套Java开发的毕业设计项目springboot销售培训考评系统源码。 技术架构 技术框架:jQuery MySQL5.7 mybatis shiro Layui HTML CSS JS jpa运行环境:jdk8 IntelliJ…

Python 可迭代对象(Iterable)、迭代器(Iterator)与生成器(generator)之间的相互关系

1、迭代 通过重复执行的代码处理相似的数据集的过程&#xff0c;并且本次迭代的处理数据要依赖上一次的结果继续往下做&#xff0c;上一次产生的结果为下一次产生结果的初始状态&#xff0c;如果中途有任何停顿&#xff0c;都不能算是迭代。 # 非迭代例子 n 0 while n < …

java之注解的定义和使用

初识注解&#xff1a; 注解的概念&#xff1a; 注解是从JDK5.0开始引入的新技术&#xff0c;它不是程序本身&#xff0c;但是和注释有相同的作用&#xff0c;都能够对程序做出一定的解释&#xff0c;并且注解能够被其他编译器所读取 注解的格式&#xff1a; 注解是以“注释…