当前位置: 首页 > 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保护…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...