vuex与vuex-persistedstate 插件固化数据
一，vuex与vuex-persistedstate 插件固化数据 的小案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Vuex基础案例</title></head><body><div id="app"><h1>计数器应用</h1><p>当前计数值：{{ count }}</p><button @click="increment">增加</button><button @click="decrement">减少</button></div><script src="./三阶段作业/vue-3.js"></script><!-- 引入 Vuex 库 --><script src="./vuex@4.0.0_dist_vuex.global.js"></script><!-- 使用vuex-persistedstate固化数据 --><script src="./unpkg.com_vuex-persistedstate@4.1.0_dist_vuex-persistedstate.umd.js"></script><script>const { createApp } = Vue;const { createStore } = Vuex;const createPersistedState = window.createPersistedState; // 导入 vuex-persistedstate 插件const store = createStore({state() {return {count: 0,};},mutations: {increment(state) {state.count++; // 状态变更方法},decrement(state) {state.count--; // 状态变更方法},},plugins: [createPersistedState()], // 添加 vuex-persistedstate 插件});createApp({computed: {count() {return store.state.count; // 从 Vuex 的 store 中获取状态}},methods: {increment() {store.commit('increment'); // 提交 mutation 来修改状态},decrement() {store.commit('decrement'); // 提交 mutation 来修改状态}}}).use(store).mount("#app"); // 在 Vue 应用中使用 Vuex 的 store 实例</script></script></body>
</html>
二，数据持久化：
刷新页面，vuex里面数据丢失、清空。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化
//需要先下载插件
npm install vuex-persistedstate --save 或者 使用
yarn add vuex-persistedstate --save
//在vuex初始化时导入插件
import persist from 'vuex-persistedstate'
//并使用
export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {},plugins: [new persist({storage: window.localStorage,}),],//会自动保存状态，刷新时不会丢失
})
喜欢的朋友记得点赞、收藏、关注哦！！！
相关文章：
vuex与vuex-persistedstate 插件固化数据
一，vuex与vuex-persistedstate 插件固化数据 的小案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>Vuex基础案例</title></head><body><div id"app"&…...
如何在WordPress网站中设置双重验证，提升安全性
随着互联网的不断进步，网站的安全问题越来越受到重视。尤其对于WordPress这样常用的建站平台，安全性显得尤为重要。尽管WordPress自带一定的安全性，但仅依靠用户名和密码的登录方式仍然存在风险。因此，启用“双重验证”便成为了提…...
2025系统架构师---基于规则的系统架构风格
引言 在业务规则频繁变更、决策逻辑高度动态化的现代企业环境中，基于规则的系统架构风格（Rule-Based System Architecture Style）通过将核心业务逻辑抽象为可配置规则、规则引擎与决策服务的分离，实现了业务敏捷…...
Python排序中lambda函数详解
在 Python 中，lambda 函数是一种匿名函数，通常用于需要一个函数但又不想为其定义一个正式名称的情况。在排序操作中，lambda 函数用于指定排序的依据。 lambda 函数的基本语法 lambda 函数的基本语法如下： lambda arguments: ex…...
web 基础与 http 协议
目录 一 Web 基础 1. 域名和 DNS 1.1 域名的概念 1.2 DNS 2. 网页与HTML 2.1 HTML 概述 2.2 HTML 基本标签 2.3 网站和主页 3. 静态网页与动态网页 3.1 静态网页 3.2 动态网页 二 HTTP 协议 1. HTTP 协议概述 2. HTTP 方法 3. HTTP 状态码 4. HTTP 请求流程分析…...
记一次奇妙的Oracle注入绕WAF之旅
0x01 一个登陆框 上班时遇到了一个登陆框 看着这个复古的界面，于是上手除了admin123456之外顺手点了个 于是弹出了一条有意思的报错 这就有意思了，毕竟已经很久没在登陆框遇到sql注入了，当我想当然的认为万能密码可以秒时，事情出…...
python裁剪小说封面标题
一张矩形图片 比如50*100 大小 中心点的坐标是是(0,0) 左上角是(-25,50) 右上角是(25,50) 左下角是(-25,-50) 右下角是(25,-50) 我希望你能用python,帮我对本地指定图片切割大小，计算出该图片的中心坐标，然后按照我输入的长宽具体值，比…...
高性价比手机如何挑选？
这四个关键点，助你找到心仪机~ 一、性能强者：游戏娱乐畅快到底 处理器相当于手机的 “大脑”，处理速度快、能力强，运行大型游戏毫无压力。 搭配上大容量运存，多任务切换也能秒速完成，再也不怕游戏卡顿啦。…...
Java面试场景深度解析
Java面试场景深度解析 在互联网大厂Java求职者的面试中，经常会被问到关于Java项目中的各种技术场景题。本文通过一个故事场景来展示这些问题的实际解决方案。 第一轮提问 面试官：马架构，欢迎来到我们公司的面试现场。请问您对Java内存模型…...
【DeepSeek认证】最好的MODBUS调试工具
根据搜索结果，MThings 和 Modbus Poll 是当前被广泛推荐且功能强大的MODBUS调试工具。以下是两者的详细对比及推荐理由： 1. MThings 核心优势： 主从一体化：支持同时模拟MODBUS主站和从站，无需切换工具即可完成双向调…...
欧莱雅集团：利用 Google Maps Platform Environment API 提供个性化护肤推荐
在欧莱雅集团，美丽绝不仅仅停留在表面。如今，这一点比以往任何时候都更加真实，因为公司将其深厚的科学专业知识与尖端技术相结合，以重塑美丽的未来。其成功的关键在于承诺不为科技而使用科技。其所有创新都满足了消费者的明确需求…...
2025三掌柜赠书活动第十五期：高并发系统：设计原理与实践
目录 前言 什么是高并发？ 高并发系统的挑战 设计原理 1、分布式架构 2、缓存与异步处理 3、数据库优化 4、弹性扩展 实践方法 1、性能监控与分析 2、压力测试 3、故障排查与容错机制 关于《高并发系统：设计原理与实践》 编辑推荐 内容简介…...
【Spark入门】Spark架构解析：组件与运行机制深度剖析
1 Spark架构全景图 Apache Spark作为当今最流行的大数据处理框架之一，其卓越性能的背后是一套精心设计的分布式架构。理解Spark的架构组成和运行机制，对于性能调优和故障排查至关重要。 1.1 核心组件架构 组件交互流程： Driver初始化…...
电子电器架构 -- 汽车零部件DV试验与PV试验的定义及关键差异
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。 生活中有两种人，一种人格外在意别人的眼光;另一种人无论…...
交换机配置DHCP
交换机配置DHCP 背景先关闭路由器的DHCPconsole口连接到交换机配置交换机 背景 路由器的dhcp分配IP地址变慢，怎么处理 先关闭路由器的DHCP 查看路由器中DHCP地址池范围; 关闭路由器的DHCP console口连接到交换机 协议Serial端口COMX波特率9600流控无 配置交换机…...
【人工智能】边缘智能的突破：Ollama模型压缩技术与DeepSeek部署实践
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 随着边缘计算的兴起，将大型语言模型（LLM）部署到资源受限的边缘设备成为研究热点。Ollama凭借其高效的模型压缩技术和轻量级推理框架，为…...
基于STM32、HAL库的DS2401P安全验证及加密芯片驱动程序设计
一、简介： DS2401P是Maxim Integrated（现为Analog Devices）生产的一款1-Wire硅序列号芯片，具有以下特点： 64位唯一ROM编码（包括8位家族码、48位序列号和8位CRC校验码） 单总线接口，…...
日志收集之 logback使用
一 简介 1.1 Logback 是一个用于 Java 应用程序的强大日志框架，广泛应用于企业级应用中。它是由 SLF4J 的创始人开发的，旨在成为 Log4j 的替代品。Logback 提供更高级、更灵活的功能，同时还支持与 SLF4J 的无缝集成。 2.2 Logback分为下面几…...
Linux学习笔记（一）：Linux下的基本指令
文章目录 Linux下的基本指令1. ls指令2. pwd指令3. cd指令4. touch指令5. mkdir指令（牢记）6. rmdir指令 && rm 指令（牢记）7. man指令（牢记）8. echo指令9. cp指令（牢记）10. m…...
Unity AI-使用Ollama本地大语言模型运行框架运行本地Deepseek等模型实现聊天对话（二）
一、使用介绍 官方网页：Ollama官方网址 中文文档参考：Ollama中文文档 相关教程：Ollama教程 使用版本：Unity 2022.3.53f1c1、Ollama 0.6.2 示例模型：llama3.2 二、运行示例 三、使用步骤 1、创建Canvas面板 具体…...
SDC命令详解：使用get_clocks命令进行查询
相关阅读 SDC命令详解https://blog.csdn.net/weixin_45791458/category_12931432.html?spm1001.2014.3001.5482 get_clocks命令用于创建一个时钟对象集合，关于设计对象和集合的更详细介绍，可以参考下面的博客。需要注意的是，在有些工具中还…...
git 修改用户名和邮箱
在 Git 中修改用户名和邮箱地址是常见的任务，这可以确保你的提交记录使用正确的身份信息。你可以通过简单的命令来完成这一操作。 全局配置 修改全局用户名 要修改全局的用户名，请执行以下命令： git config --global user.name "New…...
pg数据库删除模式
不能直接使用 DROP SCHEMA "app_sys" 删除， 这样会报错 cannot drop schema app sys 20250416 because other objects depend on it DETAlL: extension uuid-ossp depends on schema app sys 20250416sequence app sys 20250416.app sys id seq depend…...
【C++】Googletest应用
Googletest 1 配置 使用cmake配置： 具体文件后面上传补充 ./test.out --gtest_filterXXXTest.xxx 2 gdb 为了跟踪流程，可以使用gdb； gdb ./xxx.out gdb --args ./gtest --gtest_filterxxx.xxx设置运行参数 set args --gtest_filterxxx.…...
QgraphicsView异步线程加载地图瓦片
本节主要记录一下qt开发过程中离线地图瓦片的加载方式，瓦片加载选择graphicsView控件，同时为了不影响主线程事件和其他操作，这里采用了异步线程的操作，将地图瓦片加载的步骤放到了异步子线程之中。注：本记录仅为本人笔…...
机器学习day2
使用KNN算法实现机器学习 给我一个苹果的图片 我能预测出这个是一个苹果 代码： # 导入需要的库 # 读图 import os import cv2 # 绘图 import matplotlib.pyplot as plt import seaborn as sns # 数组 import numpy as np from skimage.feature import hog from sk…...
jquery解决谷歌浏览器自动保存加密密码是乱码
添加一个隐形的input框，提交隐藏input框里的数据，展示框展现的还是明文密码，并且不提交展示框的值 <formid"loginForm"class"form-signin newForm-signin"action"${ctx}/login"method"post"onsub…...
)
Python 如何操作数据库，让你使用 DeepSeek 开发数据库应用更加快 (Orm Bee)
Python 如何操作数据库，让你使用 DeepSeek 开发数据库应用更加快 操作数据库最好用 ORM 工具，可以提高开发效率. ORM 就是实体与数据库表的映射，让我们可以用面向对象的方式来操作数据库. 简单易用，直接上代码. 使用Orm Bee操作…...
如何解决 Linux 文件系统挂载失败的问题
以下是解决Linux文件系统挂载失败问题的系统性排查与解决方案： 一、设备基础检查 确认设备识别状态 执行 lsblk 或 fdisk -l 查看磁盘设备列表，验证目标设备（如 /dev/sdb1）是否被系统识别。 若设备未显示，需排查&a…...
JVM——引入
什么是JVM？它与JDK、JRE的关系？ JVM、JRE 和 JDK 是 Java 平台的三个核心组件，各自承担着不同的职责，它们之间的关系密不可分。理解它们的区别和联系有助于更好地开发、部署和运行 Java 应用程序。对于 Java 开发者来说ÿ…...
Golang｜工厂模式
工厂模式是一种创建型设计模式，它的核心思想是：把对象的创建过程封装起来，不直接在代码中 new 一个对象，而是通过一个“工厂”来生成对象。这样做的好处是： 降低了代码之间的耦合（依赖具体类减少࿰…...
Transformer数学推导——Q29 推导语音识别中流式注意力（Streaming Attention）的延迟约束优化
该问题归类到Transformer架构问题集——注意力机制——跨模态与多模态。请参考LLM数学推导——Transformer架构问题集。 在语音识别任务中，实时性是核心需求 —— 想象你使用语音助手时，每说完一个词就希望即时看到文字反馈，而不是等整句话说…...
dx11 龙书学习 第四章 dx11 准备工作
4.1 准备工作 Direct3D的初始化过程要求我们熟悉一些基本的Direct3D类型和基本绘图概念；本章第一节会向读者介绍些必要的基础知识。然后我们会详细讲解Direct3D初始化过程中的每一个必要步骤，并顺便介绍一下实时绘图应用程序必须使用的精确计时和时间测…...
运维打铁：域名详解及常见问题解决
文章目录 前言一、域名基础概念1. 什么是域名2. 域名结构3. 域名解析 二、域名工作原理1. DNS 服务器层次结构2. 域名解析过程 三、常见域名问题及解决办法1. 域名无法解析2. 域名解析延迟3. 域名解析结果不一致 四、总结 前言 在当今数字化的时代，互联网已经成为我…...
【大模型ChatGPT+R-Meta】AI赋能R-Meta分析核心技术：从热点挖掘到高级模型、助力高效科研与论文发表“
Meta分析是针对某一科研问题，根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法，对来源不同的研究成果进行收集、合并及定量统计分析的方法，现已广泛应用于农林生态，资源环境等方面，成为Science、Nature论文的…...
ElasticSearch深入解析（五）：如何将一台电脑上的Elasticsearch服务迁移到另一台电脑上
文章目录 0.安装数据迁移工具1.导出数据2.导出mapping3.导出查询模板4.拷贝插件5.拷贝配置6.导入到目标电脑上 0.安装数据迁移工具 Elasticsearch dump是一个用于将Elasticsearch索引数据导出为JSON格式的工具。你可以使用Elasticsearch dump通过命令行或编程接口来导出数据。…...
QT中的多线程
Qt中的多线程和Linux中的线程本质是相同的，Qt中针对系统提供的线程API进行了重新封装 QThread类 Qt中的多线程一般通过QThread类实现，要想创建线程就要创建这个类的实例 QThread代表一个在应用程序中可以独立控制的线程，也可以和进程中的其…...
Win11安装Ubuntu20.04简记
写在前面 之前装的22.04，不稳定，把22.04卸载了，重新安装20.04系统。这里主要把卸载和安装的过程中参考到的博客在这记录一下。 卸载ubuntu系统参考的博文 卸载参考博文1 卸载参考博文2 Ubuntu20.04安装参考博文 安装参考博文1 安装参考博…...
电子电器架构 ---电气/电子架构将在塑造未来出行方面发挥啥作用？
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。 生活中有两种人，一种人格外在意别人的眼光;另一种人无论…...
pdf.js移动端预览PDF文件时，支持双指缩放
在viewer.html中添加手势缩放代码 <script>// alert("Hello World");let agent navigator.userAgent.toLowerCase();// if (!agent.includes("iphone")) {let pinchZoomEnabled false;function enablePinchZoom(pdfViewer) {let startX 0, start…...
机器人--激光雷达
教程 教程 激光雷达 激光 激光（Laser），是一种人造的、高度纯净的单色光。 雷达 激光器旋转机构雷达。 雷达根据激光探头发出激光束的数量，一般可以分为单线激光雷达(2D激光雷达)和多线激光雷(3D激光雷达)。 作用 测距原理 激…...
最新ios开发证书/发布证书/免费证书/企业证书制作教程
本文介绍了如何制作或者苹果开发证书p12文件，含开发证书，推送证书，发布证书，企业证书，免费证书，您在iphone和ipad开发构建 IOS App 应用和苹果ios app签名需要用到。如果嫌麻烦，可以使用懒人工具…...
【Keil5-开发指南】
Keil5-编程指南 ■ Keil5 介绍■ J-Flash 使用■ Keil5-Debug调试工具 Jlink---STLink---DAP仿真器■ Keil5 使用 AStyle插件格式化代码■ Keil5-编译4个阶段■ Keil5-Boot和APP配置■ Keil5-报错■ 芯片手册区别 ■ Keil5 介绍 Keil5 介绍 ■ J-Flash 使用 J-Flash 使用 ■…...
蓝桥杯 18. 机器人繁殖
机器人繁殖 原题目链接 题目描述 X 星系的机器人可以自动复制自己。它们用 1 年的时间可以复制出 2 个自己，然后就失去复制能力。 每年 X 星系都会选出 1 个新出生的机器人发往太空。也就是说，如果 X 星系原有机器人 5 个，1 年后总数是&a…...
从微服务到AI服务：Nacos 3.0如何重构下一代动态治理体系？
在现代微服务架构的浪潮中，Nacos早已成为开发者手中的“瑞士军刀”。作为阿里巴巴开源的核心中间件，它通过动态服务发现、统一配置管理和服务治理能力，为云原生应用提供了坚实的基石。从初创公司到全球500强企业，Nacos凭借其开箱即…...
60、微服务保姆教程（三）Sentinel---高可用流量管理框架/服务容错组件
Sentinel—高可用流量管理框架/服务容错组件 一.为什么要用Sentinel? 1.微服务架构中当某服务挂掉的时候常见的原因有哪些？ 1.异常没处理 比如DB连接失败，文件读取失败等 2.突然的流量激增 比如：用户经常会在京东、淘宝、天猫、拼多多等平台上参与商品的秒杀、限时抢…...
[特殊字符] 基于Docker部署Nacos注册中心及微服务注册发现详解（含MySQL持久化配置）
📚 目录 项目背景与准备 Docker部署Nacos并配置MySQL持久化 微服务注册到Nacos（item-service示例） 微服务服务发现与调用（cart-service示例） 小结 1. 项目背景与准备 在微服务架构中，服务注册与发现是…...
CentOS 7环境配置DHCP服务器
主播多次测试，没有什么问题。如果有问题可以私信主播，主播不定时查看 目录 1. 初始配置 1.1 配置VMware workstation配置 1.2 设置虚拟机网路适配器为NAT模式 2. 环境搭建 2.1下载相应的软件包 2.2 查找下载的软件包中给出的示例代码所在目录 2.2 …...
基于常微分方程的神经网络（Neural ODE）
参考资料：B站的视频解析 知乎神经常微分方程总结 论文链接：论文 什么是常微分方程？ 微分方程式包含未知函数及其导数的方程，未知函数导数的最高阶数称为给i微分方程的阶。 常微分方程(ordinary differential equation࿰…...
对VTK中的Volume Data体数据进行二维图像处理
文章目录 概要Cpp代码处理前效果处理后效果 概要 在 VTK 中对体数据进行二维图像处理的过程通常涉及从三维体数据中提取二维切片，并对这些切片进行处理。然后，可以选择性地将处理后的切片数据重新合并成新的体数据。 以下是对 VTK 中的体数据进行二维图…...