当前位置: 首页 > news >正文

Vue3 Pinia的创建与使用代替Vuex 全局数据共享 同步异步

介绍

提供跨组件和页面的共享状态能力,作为Vuex的替代品,专为Vue3设计的状态管理库。

  • Vuex:在Vuex中,更改状态必须通过Mutation或Action完成,手动触发更新。
  • Pinia:Pinia的状态是响应式的,当状态发生变化时,组件会自动更新,无需手动触发。

官方文档 :https://pinia.vuejs.org/zh/getting-started.html

使用Pinia对用户的登录信息进行保存

安装

npm install pinia

引入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const app =createApp(App)
app.use(createPinia())
app.mount('#app')

定义Stroe

目录结构:src/store/user.js

import  {defineStore} from  'pinia'
import {reactive, ref} from "vue";
//导入pinia//user表示模块名
export const useUser =defineStore('user',()=>{//定义数据(state)dconst userId=ref(6699)//用户IDconst level =ref(10) //等级const userMsg=reactive({token:'addadgsadadadada',phone:'13111111111',age:13})//用户信息const list =ref([])//操作数据的函数(action 同步+异步)const updateUser=(newUserId)=>{userId.value=newUserId}//修改账号信息//数据返回出去 注:对象的形式return{userId,updateUser,userMsg}
})

读取Stroe

<template><h1>用户ID{{userStore.userId}}</h1><h1>用户信息{{userStore.userMsg}}</h1>
</template>
<script setup>
import {useUser} from "@/store/user.js";
//导入storeconst  userStore =useUser()
//得到 user 模块返回的对象
</script>

读取成功
在这里插入图片描述

修改Stroe

<script setup>
import {useUser} from "@/store/user.js";
//导入storeconst  userStore =useUser()
//得到 user 模块返回的对象function updateUser(){userStore.updateUser('1334')
}
</script>

Action异步

Store

// src/store/user.jsconst getList=async  ()=>{const res =await axios.get('https://tools.mgtv100.com/external/v1/bank_names').then(r=>{list.value=r.data.data})}

组件

  <div v-for="item in userStore.list" :key="item.id">{{item.bank_name}}</div>
onMounted(()=>{getList()
})function getList(){userStore.getList()
}

在这里插入图片描述


Getter计算

<template><h1>计算后等级: {{userStore.cmpLevel}}</h1>
</template>

src/store/user.js

//getterconst cmpLevel=computed(()=>{return level.value*2//该函数用来计算等级})return {cmpLevel}
// src/store/user.js

在这里插入图片描述

相关文章:

Vue3 Pinia的创建与使用代替Vuex 全局数据共享 同步异步

介绍 提供跨组件和页面的共享状态能力&#xff0c;作为Vuex的替代品&#xff0c;专为Vue3设计的状态管理库。 Vuex&#xff1a;在Vuex中&#xff0c;更改状态必须通过Mutation或Action完成&#xff0c;手动触发更新。Pinia&#xff1a;Pinia的状态是响应式的&#xff0c;当状…...

手撕数据结构02--二分搜索(附源码)

一、理论基础 二分搜索&#xff0c;也称折半搜索、对数搜索&#xff0c;是一种在有序数组中查找某一特定元素的搜索算法。 二分搜索是一种高效的查找算法&#xff0c;适用于在已排序的数组中查找特定元素。它的基本思想是通过不断将搜索区间对半分割&#xff0c;从而快速缩小…...

单片机工程师继续从事硬件设计还是涉足 Linux 开发?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「linux的资料从专业入门到高级教程」&#xff0c;点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 怎么说呢&#xff0c;感觉绝…...

《昇思25天学习打卡营第25天|第28天》

今天是打卡的第二十八天&#xff0c;实践应用篇中的计算机视觉中Vision Transformer图像分类。 从Vision Transformer&#xff08;ViT&#xff09;简介开始了解&#xff0c;模型结构&#xff0c;模型特点&#xff0c;实验的环境准备和数据读取&#xff0c;模型解析&#xff08…...

Flutter Dio网络请求报错FormatException: Unexpected character

最近开发Flutter项目&#xff0c;网络请求采用的是Dio框架&#xff0c;在发起网络请求的时候报错&#xff1a; 网络请求返回的数据为&#xff1a; var returnCitySN {"cip": "127.0.0.1", "cid": "00", "cname": "未…...

关于@JsonSerialize序列化与@JsonDeserialize反序列化注解的使用(密码加密与解密举例)

注&#xff1a;另一种方式参考 关于TableField中TypeHandler属性&#xff0c;自定义的类型处理器的使用&#xff08;密码加密与解密举例&#xff09;http://t.csdnimg.cn/NZy4G 1.简介 1.1 序列化与反序列化 学习注解之前&#xff0c;我们可以先了解一下什么是序列化与反序列…...

第二届世界科学智能大赛逻辑推理赛道:复杂推理能力评估 #大模型技术之逻辑推理方向 #Datawhale #夏令营 <二>

第二届世界科学智能大赛逻辑推理赛道&#xff1a;复杂推理能力评估 #大模型技术之逻辑推理方向 #Datawhale #夏令营-CSDN博客 这里在上一篇的基础上&#xff0c;已经充分理解了一遍baseline的流程&#xff0c;并修复了一些后处理的问题&#xff0c;包括答案抽取&#xff0c;中间…...

C# 关于Linq延迟查询

demo: int Count 0;string[] obj { "item1", "item2", "item3", "item4", "item5", "item6" };var query obj.Where(item > IsTrue(item));// 第一次遍历foreach (var item in query){Console.WriteLine(it…...

Navicat For Mysql连接Mysql8.0报错:客户端不支持服务器请求的身份验证协议

windows通过navicat连接本地mysql时报错:Client does not support authentication protocol requested by server; consider upgrading MySQL client 一、问题原因二、解决方法1--失败1. 连接mysql客户端2. 修改加密方式3.正确的解决方法1.查找my.ini文件2.修改my.ini文件3.重…...

以西门子winCC为代表的组态界面,还是有很大提升空间的。

组态界面向来都是功能为主&#xff0c;美观和体验性为辅的&#xff0c;这也导致了国内的一些跟随者如法炮制&#xff0c;而且很多操作的工程师也是认可这重模式&#xff0c;不过现在一些新的组态软件可是支持精美的定制化界面&#xff0c;还有3D交互效果&#xff0c;这就是确实…...

HomeServer平台选择,介绍常用功能

​​ 平台选择 HomeServer 的性能要求不高&#xff0c;以下是我的硬件参数&#xff0c;可供参考&#xff1a; ‍ 硬件&#xff1a; 平台&#xff1a;旧笔记本CPU&#xff1a;i5 4210u内存 8G硬盘&#xff1a;128G 固态做系统盘&#xff0c;1T1T 机械盘组 RAID1 做存储。硬…...

记录一个k8s集群zookeeper部署过程

由于网管中心交维要求必须是支持高可用配置&#xff0c;原先单节点的zookeeper不被允许。所以在k8s集群中做了一个高可用版本的zookeeper。 期间有点小波折&#xff0c;官方给的镜像版本太老&#xff0c;业务不支持&#xff0c;所以手动做了下处理&#xff0c;重新打了一个镜像…...

TapData 信创数据源 | 国产信创数据库 TiDB 数据迁移指南,加速国产化进程,推进自主创新建设

随着国家对自主可控的日益重视&#xff0c;目前在各个行业和区域中面临越来越多的国产化&#xff0c;采用有自主知识产权的国产数据库正在成为主流。长期以来&#xff0c;作为拥有纯国产自研背景的 TapData&#xff0c;自是非常重视对于更多国产信创数据库的数据连接器支持&…...

开始写人工智能

文章目录 概述 概述 开始写人工智能模块。既然决定开始写这些&#xff0c;那就开始吧&#xff01;...

盘点.软件测试模型

软件开发模型   软件开发模型(Software Development Model)是指软件开发全部过程、活动和任务的结构框架。软件开发包括需求、设计、编码和测试等阶段&#xff0c;有时也包括维护阶段。 软件开发模型能清晰、直观地表达软件开发全过程&#xff0c;明确规定了要完成的主要活动…...

燃气安全无小事,一双专业劳保鞋让你步步安心!

燃气作为我们日常生活中不可或缺的能源之一&#xff0c;为我们的生活提供了极大便利&#xff0c;其安全性往往被忽视在忙碌的日常生活背后。然而&#xff0c;燃气事故一旦发生&#xff0c;后果往往不堪设想&#xff0c;轻则财产损失&#xff0c;重则危及生命。因此&#xff0c;…...

springboot校园服装租赁系统-计算机毕业设计源码30824

目 录 摘要 1 绪论 1.1 研究背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2 校园服装租赁系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例…...

线性回归和逻辑回归揭示数据的隐藏模式:理论与实践全解析

机器学习之线性回归和逻辑回归 1. 简介1.1 机器学习概述1.2 监督学习的定义与重要性1.3 线性回归和逻辑回归在监督学习中的作用1.3.1 线性回归1.3.2 逻辑回归 2. 线性回归&#xff08;Linear Regression&#xff09;2.1 定义与目标2.1.1 回归问题的定义2.1.2 预测连续目标变量 …...

掌握采购询价软件:高效比较供应商报价的技巧

在企业运营中&#xff0c;获取所需的产品往往是一项复杂且耗时的任务&#xff0c;这涉及多个环节和流程。然而&#xff0c;借助电子采购询价&#xff08;RFQ&#xff09;系统&#xff0c;许多原本需要采购员手动完成的任务可以自动化运行&#xff0c;从而提高了效率。 那么问题…...

AMQP-核心概念-终章

本文参考以下链接摘录翻译&#xff1a; https://www.rabbitmq.com/tutorials/amqp-concepts 连接&#xff08;Connections&#xff09; AMQP 0-9-1连接通常是长期保持的。AMQP 0-9-1是一个应用级别的协议&#xff0c;它使用TCP来实现可靠传输。连接使用认证且可以使用TLS保护…...

创新流复用架构:OBS Multi RTMP插件技术方案与商业价值实现

创新流复用架构&#xff1a;OBS Multi RTMP插件技术方案与商业价值实现 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp OBS Multi RTMP插件通过创新的流复用架构&#xff0c;解决了多平…...

当plc编程遇见ai助手:用快马智能分析需求并生成优化控制方案

作为一名工业自动化领域的工程师&#xff0c;我最近尝试用AI辅助完成PLC编程工作&#xff0c;发现InsCode(快马)平台的智能对话功能特别适合处理复杂控制逻辑的开发。这种"人类描述需求AI分析生成"的协作模式&#xff0c;让传统PLC开发效率提升了至少三倍。 需求分析…...

忍者像素绘卷入门必看:Z-Image-Turbo与Stable Diffusion 16-Bit插件对比

忍者像素绘卷入门必看&#xff1a;Z-Image-Turbo与Stable Diffusion 16-Bit插件对比 1. 像素艺术创作新选择 在数字艺术创作领域&#xff0c;像素风格始终占据着独特地位。对于想要创作16-Bit复古游戏风格作品的艺术家来说&#xff0c;选择合适的工具至关重要。本文将对比分析…...

Chocolatey 安装 Python 3 时那些你可能不知道的隐藏依赖(附详细日志分析)

Chocolatey 安装 Python 3 时那些你可能不知道的隐藏依赖&#xff08;附详细日志分析&#xff09; 当你在 Windows 系统上使用 Chocolatey 安装 Python 3 时&#xff0c;表面上看只是一条简单的命令&#xff0c;但背后却隐藏着一系列复杂的依赖处理过程。这些自动安装的组件往往…...

S2-Pro可视化图表描述生成:替代Matlab和Visio的快速绘图方案

S2-Pro可视化图表描述生成&#xff1a;替代Matlab和Visio的快速绘图方案 1. 让数据可视化变得简单高效 还在为复杂的Matlab代码和繁琐的Visio操作头疼吗&#xff1f;S2-Pro的出现彻底改变了数据可视化的游戏规则。这个智能工具能将你的自然语言描述直接转化为专业图表&#x…...

假芯片识别与防范:工程师实战指南

1. 假芯片泛滥&#xff1a;半导体行业的隐秘危机最近在调试一块电路板时&#xff0c;我发现一个奇怪的现象&#xff1a;明明使用的是同型号的MCU&#xff0c;但部分板子的功耗异常偏高。经过一周的排查&#xff0c;最终发现问题出在芯片上——我们采购到了一批"套牌"…...

如何快速集成gh_mirrors/ca/card到React/Vue/Angular:打造专业信用卡表单的完整指南

如何快速集成gh_mirrors/ca/card到React/Vue/Angular&#xff1a;打造专业信用卡表单的完整指南 【免费下载链接】card :credit_card: make your credit card form better in one line of code 项目地址: https://gitcode.com/gh_mirrors/ca/card gh_mirrors/ca/card是一…...

GLM-4v-9b多图对比分析:上传两张产品图→自动识别差异点→生成结构化对比报告

GLM-4v-9b多图对比分析&#xff1a;上传两张产品图→自动识别差异点→生成结构化对比报告 1. 产品对比分析的新选择 在日常工作中&#xff0c;我们经常需要对比两个相似的产品图片——可能是不同版本的设计稿、竞品分析、或者产品质量检查。传统方法需要人工逐像素比对&#…...

手把手教你用Copilot插件在Obsidian里免费接入DeepSeek-R1(附硅基流动API密钥获取)

零成本解锁Obsidian智能助手&#xff1a;DeepSeek-R1全流程实战指南 在信息爆炸的时代&#xff0c;如何让个人知识管理工具具备AI思维能力&#xff0c;已成为数字笔记用户的核心诉求。Obsidian作为一款以本地优先为理念的Markdown笔记工具&#xff0c;其插件生态正逐步融入大语…...

用九齐单片机NY8B062F定时器实现精准延时与系统时基:从4ms中断到1秒计时的完整工程实践

九齐单片机NY8B062F定时器工程实战&#xff1a;构建高精度时基与延时系统 在嵌入式系统开发中&#xff0c;定时器如同设备的心跳&#xff0c;为各类功能提供精准的时间基准。九齐NY8B062F作为一款高性价比8位单片机&#xff0c;其四组灵活配置的定时器资源尤其适合小家电、智能…...