登录前端笔记(一):pinia管理用户数据

news2024/11/24 13:05:48

一、把pinia加入到项目文件里
①、npm install pinia
②mian.ts

//①导入createPinia
import { createPinia } from 'pinia'
//②执行方法得到实例
const pinia = createPinia()
//③把pinia实例加入到APP应用里
app.use(pinia)

二、官网简单实例(定义store【state与action】后组件使用store)
定义一个store
①定义store采用与vue3组合式API统一语法
在这里插入图片描述
②组件里使用:把导出的方法useCounterStore 在组件里执行后,得到实例对象counterStore ,后使用对象里的属性。
在这里插入图片描述
③getters:实现doubleCount总会随着count值*2来变化
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
④action异步
在这里插入图片描述
前提:npm install axios
在这里插入图片描述
在这里插入图片描述
⑤storeToRefs:响应式解构
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、Pinia管理数据
①原理
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2208080.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Stylized Far East 古代国风建筑城镇宫殿场景模型

古代国风建筑城镇宫殿场景模型。内容: -演示场景(截图) - 种类繁多的建筑,如宫殿、商店、神社、房屋、餐馆、宝塔、寺庙等 -带有塔楼、门楼的模块化城堡墙 -树木、岩石、悬崖和其他自然资产 -传统装饰,如纸灯笼、绘画、瓷器等 - 城镇道具,如手推车、栅栏、板条箱、市场、…

Redis-缓存一致性

缓存双写一致性 更新策略探讨 面试题 缓存设计要求 缓存分类: 只读缓存:(脚本批量写入,canal 等)读写缓存 同步直写:vip数据等即时数据异步缓写:允许延时(仓库,物流&a…

el-carousel-item自动重复渲染,使用nanoid让重复的元素包含不同的id

<template><div class"page-container"><div class"m-title">轮播图</div><el-carousel height"400px" :autoplay"true"><el-carousel-item v-for"(item, index) in carouselList" :key&…

AOT漫谈专题(第二篇): 如何对C# AOT轻量级APM监控

一&#xff1a;背景 1. 讲故事 上一篇我们聊到了如何调试.NET Native AOT 程序&#xff0c;这是研究一个未知领域知识的入口&#xff0c;这篇我们再来看下如何对 Native AOT 程序进行轻量级的APM监控&#xff0c;当然这里的轻量级更多的是对 AOT 中的coreclr内容的挖掘。 二…

面试官最喜欢问的28道ZooKeeper面试题

前言 ZooKeeper 是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、分布式同步、组服务等。 ZooKeeper 的目标就是封装好复杂易出错的关键服务&#xff0c;…

再也不怕面试官问我几百亿ip相关的问题了

首先要明确这一类的问题都是海量那个数据类型的问题&#xff0c;对于海量数据我们一般采用分而治之的思路去解决&#xff0c;考官考察的就是你有没有处理海量数据的经验。总结几个常见的海量数据相关的面试&#xff0c;供参考。 有一个存放10GB的ip地址文件&#xff0c;每行一…

2024年【安全生产监管人员】免费试题及安全生产监管人员模拟试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年安全生产监管人员免费试题为正在备考安全生产监管人员操作证的学员准备的理论考试专题&#xff0c;每个月更新的安全生产监管人员模拟试题祝您顺利通过安全生产监管人员考试。 1、【单选题】()以上地方人民政府…

基于SSM的民宿预订系统的设计与实现

文未可获取一份本项目的java源码和数据库参考。 一、毕业设计&#xff08;论文&#xff09;选题的目的和意义 由于现代人经济水平的不断提高&#xff0c;出门旅游已经成为人们放松和休息的一种生活方式。而出门在外&#xff0c;住宿也是首要问题&#xff0c;相比于传统的酒店…

五子棋项目自动化测试

目录 一、五子棋项目介绍 二、编写Web测试用例 三、自动化测试脚本开发 1、引入依赖 2、设计框架 3、Utils 4、LoginPage 5、RegisterPage 6、MatchPage 7、RunTest类 8、运行程序 一、五子棋项目介绍 五子棋项目是基于 WebSocket 实现的多人在线对战系统&#xff0…

【优选算法】(第三十六篇)

目录 ⼆叉树的锯⻮形层序遍历&#xff08;medium&#xff09; 题目解析 讲解算法原理 编写代码 ⼆叉树的最⼤宽度&#xff08;medium&#xff09; 题目解析 讲解算法原理 编写代码 ⼆叉树的锯⻮形层序遍历&#xff08;medium&#xff09; 题目解析 1.题目链接&#xf…

【高中生讲机器学习】21. 隐马尔可夫模型好难?看过来!(下篇)

创建时间&#xff1a;2024-10-09 首发时间&#xff1a;2024-10-12 最后编辑时间&#xff1a;2024-10-12 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名高一学生&#xff0c;热爱计…

SpringBoot购物推荐网站:设计与实现的最佳实践

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常适…

『深度分析』Kimi版o1来了!Kimi探索版全面解读!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…

28幅高清修复的英文版中国地图

我们在《183幅值得珍藏的全国地质图集》和《55幅值得珍藏的水文地质图集》两文中&#xff0c;为你分享过精美的全国地质图和水文地质图。 现在我们整理了28幅英文版中国地图&#xff0c;并经过高清修复后分享给大家&#xff0c;你可以在文末查看该数据的领取方法。 28幅英文版…

Channel模块 --- 管理套接字事件

目录 设计思想 实现 设计思想 Channel模块是用于对一个描述符所需要监控的事件以及事件触发之后要执行的回调函数进行管理的 具体来说&#xff0c;它里面会保存该文件描述符所监控的事件&#xff0c;该文件描述符所就绪的事件&#xff0c;以及该描述符的各种事件的处理回调…

4 机器学习之归纳偏好

通过学习得到的模型对应了假设空间中的一个假设。于是&#xff0c;图1.2的西瓜版本空间给我们带来一个麻烦&#xff1a;现在有三个与训练集一致的假设&#xff0c;但与它们对应的模型在面临新样本的时候&#xff0c;却会产生不同的输出。例如&#xff0c;对&#xff08;色泽青绿…

java算法oj(3)栈和队列

目录 1.前言 2.正文 2.1基础操作 2.2用栈实现队列 2.2.1题目 2.2.2示例 2.2.3代码 2.3用队列实现栈 2.3.1题目 2.3.2示例 2.3.3代码 2.4最小栈 2.4.1题目 2.4.2示例 2.4.3代码 3.小结 1.前言 哈喽大家好吖&#xff0c;今天来分享几道栈与队列的算法题&#…

三、AOP

文章目录 1. AOP&#xff08;概念&#xff09;2. AOP&#xff08;底层原理&#xff09;2.1 AOP 底层使用动态代理2.2 AOP&#xff08;JDK动态代理&#xff09; 3. AOP&#xff08;术语&#xff09;3.1 连接点3.2 切入点3.3 通知&#xff08;增强&#xff09;3.4 切面 4. AOP操作…

数据丢失不再怕!四款数磁盘数据恢复据恢复工具实测心得

在办公室行政的工作中&#xff0c;数据恢复工具是我们不可或缺的帮手。无论是不小心删除了重要文件&#xff0c;还是硬盘突然罢工&#xff0c;这些工具总能在关键时刻帮我们力挽狂澜。今天&#xff0c;我就来分享一下我使用福昕数据恢复、转转大师数据恢复、超级兔子数据恢复和…

MySQL 【数字】函数大全(二)

MODPIPOWPOWERRANDROUNDSIGNSQRTTRUNCATE 1、MOD MOD(number1, number2) &#xff1a;返回一个数字除以另一个数字的余数。 语法&#xff1a; 1、MOD(number1, number2) 2、number1 MOD number2 3、number1 % number2 number1&#xff1a;被除数。 number2&#xff1a;除数。…