Vue.js 状态管理库Pinia
Pinia
- Pinia :Vue.js 状态管理库
- Pinia持久化插件-persist
Pinia :Vue.js 状态管理库
Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。
- 要使用Pinia ,先要安装npm install pinia
- 在main.js中导入Pinia 并使用
示例代码:import './assets/main.scss'import { createApp } from 'vue' import ElementPlus from 'element-plus' //导入 element-plus 的样式 import 'element-plus/dist/index.css' import router from '@/router' import App from './App.vue' //导入 createPinia import { createPinia } from 'pinia'const app = createApp(App); //创建一个 pinia 实例 const pinia = createPinia(); //使用 pinia app.use(pinia);app.use(router); app.use(ElementPlus); app.mount('#app')
- 在src目录下,创建stores文件夹,并创建token.js文件。
示例代码://定义 store import {defineStore} from 'pinia'; import {ref} from 'vue'; /*第一个参数:名字,唯一性第二个参数:函数,函数的内部可以定义状态的所有内容返回值:函数 */ export const useTokenStore = defineStore('token', ()=>{//定义状态内容//1.响应式变量const token = ref('')//2.定义一个修改token的函数,用来修改token的值const setToken = (newToken) => {token.value = newToken;}//3.定义一个移除token值的函数const removeToken = () => {token.value = '';}return {token,setToken,removeToken}});
- 在组件中使用Pinia,即使用刚才创建的useTokenStore。
用Pinia是为了存储token,并在多个组件中使用这个token。
-
首先,登录成功后,会得到一个token,把该token存储到Pinia
示例代码:
//导入 有Pinia函数的token.js文件 import { useTokenStore } from '@/stores/token' const tokenStore = useTokenStore();//登录函数 const login = async () => {//调用接口,完成登录let result = await userLoginService(registerData.value);//alert(result.msg ? result.msg : '登录成功');ElMessage.success(result.msg ? result.mag : '登录成功');//把得到的token存储到pinia中tokenStore.setToken(result.data);//跳转到首页,使用useRouter切换组件,完成跳转router.push('/'); }
-
在调用后端接口的js文件中,发送请求前,先获取Pinia里的token,
发送请求时,把token这个参数传给后端就行了。示例代码:
//导入请求工具request.js,就相当于可以直接使用请求工具里的axios了 import request from '@/utils/request.js' //导入前边创建的带Pinia的token.js文件 import { useTokenStore } from '@/stores/token.js'//调用后端接口的函数 export const articleCategoryListService = () => {//先获取tokenconst tokenStore = useTokenStore();//在pinia中定义的响应式数据,都不需要.value,这里直接传token这个参数就行return request.get('/category',{headers:{'Authorization':tokenStore.token}}) }
Pinia持久化插件-persist
- Pinia默认是内存存储,当刷新浏览器时,会丢失数据。
- Persist插件可以将pinia中的数据持久化的存储
-
要使用persist,首先安装persist:npm install pinia-persistedstate-plugin
-
在Pinia中使用persist
- 先在main.js里导入persist的createPersistedState函数
示例代码:
import './assets/main.scss'import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import router from '@/router' import App from './App.vue' import { createPinia } from 'pinia' //导入 persist 的 createPersistedState函数 import { createPersistedState } from 'pinia-persistedstate-plugin'const app = createApp(App); const pinia = createPinia();//创建一个 persit 实例 const persist = createPersistedState(); //在 pinia 中,使用 persist pinia.use(persist);app.use(pinia); app.use(router); app.use(ElementPlus); app.mount('#app')
- 先在main.js里导入persist的createPersistedState函数
-
定义状态Store时,指定持久化配置参数。
在stores文件夹的token.js中,指定持久化存储。
示例代码:
import {defineStore} from 'pinia'; import {ref} from 'vue';export const useTokenStore = defineStore('token', ()=>{const token = ref('')const setToken = (newToken) => {token.value = newToken;}const removeToken = () => {token.value = '';}return {token,setToken,removeToken} }, {//持久化存储persit:true } );
相关文章:
Vue.js 状态管理库Pinia
Pinia Pinia :Vue.js 状态管理库Pinia持久化插件-persist Pinia :Vue.js 状态管理库 Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。 要使用Pinia ,先要安装npm install pinia在main.js中导入Pinia 并使用 示例…...
qwen2.5-vl-7B视觉大模型 私有化部署webUI
服务器选用:算力云 部署qwen2.5-vl-7B,24g显卡跑不起图,单问问题就占20g左右。有能力可以用大点的显卡 一、下载模型 Qwen2.5-VL-7B-Instruct 有conda ,可以在conda下操作,不知道conda的同学可以参考本博主之前的文章…...
Spring Boot 线程池自定义拒绝策略:解决任务堆积与丢失问题
如何通过自定义线程池提升系统稳定性 背景 在高并发系统中,线程池管理至关重要。默认线程池可能导致: 资源浪费(创建过多线程导致 OOM)任务堆积(队列满后任务被拒绝)任务丢失(默认拒绝策略丢…...
C++17 新特性解析
C++17 是 C++ 标准的一个重要更新,它在 C++11/14 的基础上引入了许多新特性,进一步简化了代码编写、提升了性能和类型安全性。以下是 C++17 的主要特性分类介绍: 一、语言核心改进 1. 结构化绑定(Structured Bindings) 允许将元组、结构体或数组的成员直接解包到变量中。…...
支持向量机相关文献
根据最新的研究动态和文献综述,当前支持向量机(SVM)的研究方向和内容主要集中在以下几个方面: 1. 提高训练效率 并行计算与分布式计算:随着数据规模的增加,SVM的训练时间往往较长,难以满足实时…...
线上hbase rs 读写请求个数指标重置问题分析
问题描述: 客户想通过调用hbase的jmx接口获取hbase的读写请求个数,以此来分析HBase读写请求每日增量。 但是发现生产,测试多个集群,Hbase服务指标regionserver读写请求个数存在突然下降到0或者大幅度下降情况。 需要排查原因: 某个Region的读写请求数:会发现经常会重置为…...
USB子系统学习(四)用户态下使用libusb读取鼠标数据
文章目录 1、声明2、HID协议2.1、描述符2.2、鼠标数据格式 3、应用程序4、编译应用程序5、测试6、其它 1、声明 本文是在学习韦东山《驱动大全》USB子系统时,为梳理知识点和自己回看而记录,全部内容高度复制粘贴。 韦老师的《驱动大全》:商…...
WPF 设置宽度为 父容器 宽度的一半
方法1:使用 绑定和转换器 实现 创建类文件 HalfWidthConverter public class HalfWidthConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, CultureInfo culture){if (value is double width){return width / 4…...
网络工程师 (30)以太网技术
一、起源与发展 以太网技术起源于20世纪70年代,最初由Xerox公司的帕洛阿尔托研究中心(PARC)开发。最初的以太网采用同轴电缆作为传输介质,数据传输速率为2.94Mbps(后发展为10Mbps),主要用于解决…...
2025.2.11
1> 制作一个闹钟软件 .h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLabel> #include <QLineEdit> #include <QPushButton> #include <QTime> #include <QTimer> #include <QTimeEdit> #include <QDa…...
HTML应用指南:利用POST请求获取接入比亚迪业态的充电桩位置信息
在新能源汽车快速发展的今天,充电桩的分布和可用性成为了影响用户体验的关键因素之一。比亚迪作为全球领先的新能源汽车制造商,不仅在车辆制造方面取得了卓越成就,也在充电基础设施建设上投入了大量资源。为了帮助用户更方便地找到比亚迪充电桩的位置,本篇文章,我们将探究…...
系统URL整合系列视频四(需求介绍补充)
视频 系统URL整合系列视频四(需求补充说明) 视频介绍 (全国)大型分布式系统Web资源URL整合需求(补充)讲解。当今社会各行各业对软件系统的web资源访问权限控制越来越严格,控制粒度也越来越细。…...
PRC框架-Dubbo
RPC框架 RPC(Remote Procedure Call,远程过程调用)框架是一种允许客户端通过网络调用服务器端程序的技术。以下是常见的RPC框架及其特点: 1. 基于HTTP/REST的RPC框架 特点:简单易用,与Web开发无缝集成&am…...
Win10环境借助DockerDesktop部署最新MySQL9.2
Win10环境借助DockerDesktop部署最新MySQL9.2 前言 作为一杆主要撸Java的大数据平台开发攻城狮,必不可少要折腾各种组件,环境和版本一直是很头疼的事情。虽然可以借助Anaconda来托管Python的环境,也可以使用多个虚拟机来部署不同的环境&…...
PlantUML 总结
PlantUML 总结 1. 概述 PlantUML 是一个开源工具,允许用户通过简单的文本描述来生成各种UML图表。它支持多种图表类型,包括但不限于序列图、用例图、类图、活动图等。 2. 基本概念 2.1 开始和结束标记 startuml 和 enduml:用于标记Plant…...
【Elasticsearch】监控与管理:集群监控指标
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
Swift的方法派发机制
1. 静态派发(Static Dispatch) 静态派发在编译时确定方法的具体实现,调用时直接跳转到该实现。静态派发的优点是性能高,因为不需要运行时查找方法实现。 适用场景: 值类型(Struct 和 Enum)&am…...
4.python+flask+SQLAlchemy+达梦数据库
前提 1.liunx Centos7上通过docker部署了达梦数据库。从达梦官网下载的docker镜像。(可以参考前面的博文) 2.windows上通过下载x86,win64位的达梦数据库,只安装客户端,不安装服务端。从达梦官网下载达梦数据库windows版。(可以参考前面的博文) 这样就可以用windows的达…...
6.深度学习在推荐系统中的应用
接下来我们将学习深度学习在推荐系统中的应用。深度学习技术近年来在推荐系统中得到了广泛应用,能够有效提升推荐系统的性能和精度。在这一课中,我们将介绍以下内容: 深度学习在推荐系统中的优势常用的深度学习推荐模型深度学习推荐系统的实…...
Leetcode - 149双周赛
目录 一、3438. 找到字符串中合法的相邻数字二、3439. 重新安排会议得到最多空余时间 I三、3440. 重新安排会议得到最多空余时间 II四、3441. 变成好标题的最少代价 一、3438. 找到字符串中合法的相邻数字 题目链接 本题有两个条件: 相邻数字互不相同两个数字的的…...
ArrayList、LinkedList、HashMap、HashTable、HashSet、TreeSet
集合族谱 在这些集合中,仅有vector和hashtable是线程安全的,其内部方法基本都有synchronized修饰。 ArrayList 底层采用Object数组实现,实现了RandomAccess接口因此支持随机访问。插入删除操作效率慢。 ArrayList需要一份连续的内存空间。 A…...
在 Windows 系统中如何快速进入安全模式的两种方法
在使用电脑的过程中,有时我们可能会遇到一些需要进入“安全模式”来解决的问题。安全模式是一种特殊的启动选项,它以最小化配置启动操作系统,仅加载最基本的驱动程序和服务,从而帮助用户诊断和修复系统问题。本文中简鹿办公将详细…...
【CS61A 2024秋】Python入门课,全过程记录P7(Week13 Macros至完结)【完结撒花!】
文章目录 关于新的问题更好的解决方案Week13Mon Macros阅读材料Lab 11: Programs as Data, MacrosQ1: WWSD: QuasiquoteQ2: If ProgramQ3: Exponential PowersQ4: Repeat Wed SQL阅读材料Disc 11: MacrosQ1: Mystery MacroQ2: Multiple AssignmentQ3: Switch Optional Contest:…...
AspectJ 下 Advisor 的排序过程
在 AbstractAdvisorAutoProxyCreator#findEligibleAdvisors 方法中,找到 BeanFactory 中所有的 Advisor 后,针对当前 beanClass 进行过滤,筛选出符合当前 beanClass 的 Advisor,称之为 eligibleAdvisors。接着对 eligibleAdvisors…...
Unity 高度可扩展的技能与多 Buff 框架详解
一、框架设计 1.1 核心思想 组件化设计: 将技能和 Buff 抽象为可复用的组件,通过组合不同的组件实现复杂的效果。 数据驱动: 使用 ScriptableObject 或 JSON 等数据格式定义技能和 Buff 的属性,方便配置和修改。 事件驱动: 利用 Unity 的事件系统或自…...
机器学习中过拟合和欠拟合问题处理方法总结
目录 一、背景二、过拟合(Overfitting)2.1 基本概念2.2 过拟合4个最主要的特征2.3 防止过拟合的11个有效方法 三、欠拟合(Underfitting)3.1 基本概念3.2 欠拟合的4个特征3.3 防止欠拟合的11个有效方法 四、总结五、参考资料 一、背景 在机器学习模型训练…...
新一代高性能无线传输模块M-GATEWAY3
M-GATEWAY3是M3系列的通用接口模块,用于接收各种总线信号并将它们集成到一个系统中。该模块通过标准化传输协议XCPonETH进行输出,确保为各种测量应用提供无损信号。此外,M-GATEWAY3支持通过热点、ETH-PC或USB-C传输数据。借助M-GATEWAY3&…...
一、通义灵码插件保姆级教学-IDEA(安装篇)
JetBrains IDEA 中安装教学 第一步:事先准备 支持系统:Windows 7 ~ Windows 11、Linux、macOS;下载并安装兼容的 JetBrains IDEA 2020.3 及以上版本; 第二步:在 IntelliJ IDEA 中安装通义灵码 方法 1:通…...
【leetcode 32】1047. 删除字符串中的所有相邻重复项
Java中的queue、deque、ArrayDeque的区别 使用 Deque 作为堆栈(ArrayDeque是双端队列,当仅使用栈操作时push/pop,就是栈) class Solution {public String removeDuplicates(String s) {//使用 Deque 作为堆栈(ArrayDeque是双端队列,当仅使用栈…...
ubuntu 安装vnc之后,本地黑屏,vnc正常
ubuntu 安装vnc之后,本地黑屏,vnc正常 在Ubuntu系统中安装VNC服务器(如TightVNC或RealVNC)后,如果遇到连接时本地屏幕变黑的情况,可能是由于几种不同的配置或兼容性问题。以下是一些解决步骤,可以帮助你解决这个问题&…...
【实战AI】利用deepseek 在mac本地部署搭建个人知识库
之前的文章中实现了本地通过ollma 部署deepseek R1:14b 模型,这里我想继续实现个人知识库,方便自己文档,数据的检索; 下载anythingLLM 地址: https://anythingllm.com/desktop 下载安装即可;…...
ASP.NET Core的贫血模型与充血模型
目录 概念 需求 贫血模型 充血模型 总结 概念 贫血模型:一个类中只有属性或者成员变量,没有方法。充血模型:一个类中既有属性、成员变量,也有方法。 需求 定义一个类保存用户的用户名、密码、积分;用户必须具有…...
java基础6(黑马)
一、static 1.static修饰成员变量 static:叫静态,可以修饰成员变量、成员方法。 成员变量按照有无static,分两种。 类变量:有static修饰,属于类,在计算机中只有一份,会被类的全部对象共享。…...
LabVIEW外延片光致发光(PL)扫描系统
本文介绍了基于LabVIEW的PL扫描系统的开发过程,包括硬件选型(如ECOPIA激光器、EPP2000光谱仪)、软件架构(多线程控制、动态显示)、环境适配(温湿度控制、防震)等关键设计。结合工业需求…...
安装Jenkins
Linux中安装jenkins 采用RPM安装包方式:Jenkins安装包下载地址 wget https://pkg.jenkins.io/redhat-stable/jenkins-2.190.1-1.1.noarch.rpm执行安装 rpm -ivh jenkins-2.190.1-1.1.noarch.rpm修改配置文件: vi /etc/sysconfig/jenkins修改内容&…...
开发中常用的快捷键
开发中常用的快捷键 浏览器开发工具ideavscode 浏览器 清除浏览器的缓存:ctrl shift delete 开发工具 idea 前端JS代码格式化:ctrl alt L vscode...
前端如何判断浏览器 AdBlock/AdBlock Plus(最新版)广告屏蔽插件已开启拦截
2个月前AdBlock/AdBlock Plus疑似升级了一次 因为自己主要负责面对海外的用户项目,发现以前的检测AdBlock/AdBlock Plus开启状态方法已失效了,于是专门研究了一下。并尝试了很多方法。 已失效的老方法 // 定义一个检测 AdBlock 的函数 function chec…...
ASP.NET Core 如何使用 C# 向端点发出 POST 请求
使用 C#,将 JSON POST 到 REST API 端点;如何从 REST API 接收 JSON 数据。 本文需要 ASP .NET Core,并兼容 .NET Core 3.1、.NET 6和.NET 8。 要从端点获取数据,请参阅本文。 使用 . 将 JSON 数据发布到端点非常容易HttpClien…...
更新无忧:用 Docker 数据卷确保 Open WebUI 数据持久化
在使用 Docker 部署 Open WebUI 时,如何在更新容器的同时确保数据不丢失,始终是工程师们关注的焦点。每次拉取新版镜像、停止并重启容器时,如果没有正确挂载数据卷,配置和数据库数据极易流失,给生产环境带来不必要的麻…...
Ubuntu 下 nginx-1.24.0 源码分析 - ngx_atomic_cmp_set 函数
目录 修正 执行 ./configure 命令时,输出: checking for OS Linux 6.8.0-52-generic x86_64 checking for C compiler ... found using GNU C compiler gcc version: 11.4.0 (Ubuntu 11.4.0-1ubuntu1~22.04) 所以当前环境是 x86_64 于是在 src…...
为什么我用Python控制仪器比C#慢很多?如何优化性能?
在自动化测试、实验室仪器控制等领域,Python、C# 和 C 是常见的编程语言选择。最近,我在使用 Python 控制仪器时,发现其交互速度明显比 C# 慢很多。这让我感到困惑,毕竟 Python 以其简洁和高效著称,为什么会出现这种情…...
Linux虚拟机克隆
克隆 从现有虚拟机(关机状态)克隆出新虚拟机,右键选择管理>克隆: 选择完整克隆 设置虚拟机名称及存储位置 开机修改系统相关配置 注意: 使用root 用户。 修改vim /etc/sysconfig/network-scripts/ifcfg-ens33 ,修改IP 地址 vim /etc/sysconfig…...
开发完的小程序如何分包
好几次了,终于想起来写个笔记记一下 我最开始并不会给小程序分包,然后我就各种搜,发现讲的基本上都是开发之前的小程序分包,可是我都开发完要发布了,提示我说主包太大需要分包,所以我就不会了。。。 好了…...
气体控制器联动风机,检测到环境出现异常时自动打开风机进行排风;
一、功能:检测到环境出现异常时自动打开风机进行排风; 二、设备: 1.气体控制器主机:温湿度,TVOC等探头的主机,可上报数据,探头监测到异常时,主机会监测到异常可联动风机或声光报警…...
攻防世界33 catcat-new【文件包含/flask_session伪造】
题目: 点击一只猫猫: 看这个url像是文件包含漏洞,试试 dirsearch扫出来/admin,访问也没成功(--delay 0.1 -t 5) 会的那几招全用不了了哈哈,那就继续看答案 先总结几个知识点 1./etc/passwd&am…...
让文物“活”起来,以3D数字化技术传承文物历史文化!
文物,作为不可再生的宝贵资源,其任何毁损都是无法逆转的损失。然而,当前文物保护与修复领域仍大量依赖传统技术,同时,文物管理机构和专业团队的力量相对薄弱,亟需引入数字化管理手段以应对挑战。 积木易搭…...
Java+vue前后端分离项目集群部署
一、项目概述 假设我们有一个前后端分离的项目,前端使用React或Vue框架,后端使用Spring Boot或Node.js。我们将分别部署前端和后端到集群环境中。 二、准备工作 1. 代码准备:确保前端和后端代码已经开发完成,并通过本地测试。 2…...
【算法解析】(2)分治算法:归并排序和快速排序
1. 分治算法(Divide and Conquer) 分治算法的核心思想是将一个大问题分解为多个小问题,分别解决这些小问题,然后将小问题的解合并起来得到大问题的解。 2. 算法步骤 分治算法通常包含以下三个步骤: 分解(Divide):将原问题分解为若干个规模较小、相互独立、与原问题…...
Qt文本处理【正则表达式】示例详解:【QRegularExpression】
在 Qt 中,正则表达式是处理文本的强大工具,它能够帮助我们匹配、搜索和替换特定的字符串模式。自 Qt 5 起,QRegularExpression 类提供了对 ECMAScript 标准的正则表达式支持,这使得它在处理各种复杂的字符串任务时变得更加高效和灵…...
在 Navicat 17 中扩展 PostgreSQL 数据类型 - 枚举类型
枚举类型 在 Navicat Premium 17 中创建 PostgreSQL 的自定义数据类型的系列中,我们已经探索了多个主题。在 第 1 部分 ,我们学习了如何为 免费 DVD 租赁数据库 创建自定义域。上周,我们创建了一个复合类型,用于从用户定义的函数…...