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 全局数据共享 同步异步
介绍 提供跨组件和页面的共享状态能力,作为Vuex的替代品,专为Vue3设计的状态管理库。 Vuex:在Vuex中,更改状态必须通过Mutation或Action完成,手动触发更新。Pinia:Pinia的状态是响应式的,当状…...
手撕数据结构02--二分搜索(附源码)
一、理论基础 二分搜索,也称折半搜索、对数搜索,是一种在有序数组中查找某一特定元素的搜索算法。 二分搜索是一种高效的查找算法,适用于在已排序的数组中查找特定元素。它的基本思想是通过不断将搜索区间对半分割,从而快速缩小…...
单片机工程师继续从事硬件设计还是涉足 Linux 开发?
在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「linux的资料从专业入门到高级教程」,点个关注在评论区回复“666”之后私信回复“666”,全部无偿共享给大家!!! 怎么说呢,感觉绝…...
《昇思25天学习打卡营第25天|第28天》
今天是打卡的第二十八天,实践应用篇中的计算机视觉中Vision Transformer图像分类。 从Vision Transformer(ViT)简介开始了解,模型结构,模型特点,实验的环境准备和数据读取,模型解析(…...
Flutter Dio网络请求报错FormatException: Unexpected character
最近开发Flutter项目,网络请求采用的是Dio框架,在发起网络请求的时候报错: 网络请求返回的数据为: var returnCitySN {"cip": "127.0.0.1", "cid": "00", "cname": "未…...
关于@JsonSerialize序列化与@JsonDeserialize反序列化注解的使用(密码加密与解密举例)
注:另一种方式参考 关于TableField中TypeHandler属性,自定义的类型处理器的使用(密码加密与解密举例)http://t.csdnimg.cn/NZy4G 1.简介 1.1 序列化与反序列化 学习注解之前,我们可以先了解一下什么是序列化与反序列…...
第二届世界科学智能大赛逻辑推理赛道:复杂推理能力评估 #大模型技术之逻辑推理方向 #Datawhale #夏令营 <二>
第二届世界科学智能大赛逻辑推理赛道:复杂推理能力评估 #大模型技术之逻辑推理方向 #Datawhale #夏令营-CSDN博客 这里在上一篇的基础上,已经充分理解了一遍baseline的流程,并修复了一些后处理的问题,包括答案抽取,中间…...
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为代表的组态界面,还是有很大提升空间的。
组态界面向来都是功能为主,美观和体验性为辅的,这也导致了国内的一些跟随者如法炮制,而且很多操作的工程师也是认可这重模式,不过现在一些新的组态软件可是支持精美的定制化界面,还有3D交互效果,这就是确实…...
HomeServer平台选择,介绍常用功能
平台选择 HomeServer 的性能要求不高,以下是我的硬件参数,可供参考: 硬件: 平台:旧笔记本CPU:i5 4210u内存 8G硬盘:128G 固态做系统盘,1T1T 机械盘组 RAID1 做存储。硬…...
记录一个k8s集群zookeeper部署过程
由于网管中心交维要求必须是支持高可用配置,原先单节点的zookeeper不被允许。所以在k8s集群中做了一个高可用版本的zookeeper。 期间有点小波折,官方给的镜像版本太老,业务不支持,所以手动做了下处理,重新打了一个镜像…...
TapData 信创数据源 | 国产信创数据库 TiDB 数据迁移指南,加速国产化进程,推进自主创新建设
随着国家对自主可控的日益重视,目前在各个行业和区域中面临越来越多的国产化,采用有自主知识产权的国产数据库正在成为主流。长期以来,作为拥有纯国产自研背景的 TapData,自是非常重视对于更多国产信创数据库的数据连接器支持&…...
开始写人工智能
文章目录 概述 概述 开始写人工智能模块。既然决定开始写这些,那就开始吧!...
盘点.软件测试模型
软件开发模型 软件开发模型(Software Development Model)是指软件开发全部过程、活动和任务的结构框架。软件开发包括需求、设计、编码和测试等阶段,有时也包括维护阶段。 软件开发模型能清晰、直观地表达软件开发全过程,明确规定了要完成的主要活动…...
燃气安全无小事,一双专业劳保鞋让你步步安心!
燃气作为我们日常生活中不可或缺的能源之一,为我们的生活提供了极大便利,其安全性往往被忽视在忙碌的日常生活背后。然而,燃气事故一旦发生,后果往往不堪设想,轻则财产损失,重则危及生命。因此,…...
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. 线性回归(Linear Regression)2.1 定义与目标2.1.1 回归问题的定义2.1.2 预测连续目标变量 …...
掌握采购询价软件:高效比较供应商报价的技巧
在企业运营中,获取所需的产品往往是一项复杂且耗时的任务,这涉及多个环节和流程。然而,借助电子采购询价(RFQ)系统,许多原本需要采购员手动完成的任务可以自动化运行,从而提高了效率。 那么问题…...
AMQP-核心概念-终章
本文参考以下链接摘录翻译: https://www.rabbitmq.com/tutorials/amqp-concepts 连接(Connections) AMQP 0-9-1连接通常是长期保持的。AMQP 0-9-1是一个应用级别的协议,它使用TCP来实现可靠传输。连接使用认证且可以使用TLS保护…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...
