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

Pinia之2:计数器案例、computed函数、异步action、storeToRefs函数、pinia调试

欢迎来到“雪碧聊技术”CSDN博客!

在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将不断探索Java的深邃世界,分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游,携手提升技术能力,共创美好未来!感谢您的关注与支持,期待在“雪碧聊技术”与您共同成长!

目录

一、计数器案例(练习pinia的基本使用步骤)

1、在src目录下,新建stores目录(该目录专门用来存放store)

2、在stores目录下,新建文件counter.js,定义Store(包含数据+方法)

3、在组件中,使用Store

4、展示效果

二、computed函数

1、computed函数是什么?

2、总结

①computed函数,用来根据已有的属性,计算出新属性的值。

②说白了,computed函数就是用来定义属性的。

三、异步action

1、什么是action?

2、action分类

①同步action

②异步action

3、举例:异步action的使用

①下载axios依赖

②在pinia的store中,引入axios,并编写异步方法(异步action)

③在组件中,使用钩子函数onMounted,调用异步方法(异步action),来获取结果、使用结果

④刷新页面,查看效果

四、storeToRefs函数

1、通过一个案例,引出storeToRefs函数

①我们不想使用.来获取store中的属性了,于是尝试直接解构store,来获取属性

②运行项目,查看效果

2、使用storeToRefs函数来解决上述问题

3、演示效果

4、注意:

①storeToRefs函数只能解构出store中的属性。

②如果想解构出store中的方法,那么不能加storeToRefs,而是直接解构

五、Pinia调试

1、在浏览器上,下载vue.js devtools插件

2、右击项目页面,点击检查,点击vue

结语


一、计数器案例(练习pinia的基本使用步骤)

1、在src目录下,新建stores目录(该目录专门用来存放store)

2、在stores目录下,新建文件counter.js,定义Store(包含数据+方法)

3、在组件中,使用Store

4、展示效果

以上就是使用pinia完成的一个计算机案例。

展示了pinia的基本使用步骤,要牢牢记住。 

二、computed函数

1、computed函数是什么?

        computed函数,又叫计算属性函数,用来根据一个属性的值,计算出另一个属性的值。

        举例:

        运行项目:

2、总结

①computed函数,用来根据已有的属性,计算出新属性的值。

②说白了,computed函数就是用来定义属性的。

三、异步action

1、什么是action?

        其实我们action就是方法,即:刚才我们在计算机案例的store中定义的、用来操作属性的方法,如下:

2、action分类

①同步action

②异步action

3、举例:异步action的使用

①下载axios依赖

# 下载axios依赖
npm install axios

②在pinia的store中,引入axios,并编写异步方法(异步action)

③在组件中,使用钩子函数onMounted,调用异步方法(异步action),来获取结果、使用结果

④刷新页面,查看效果

四、storeToRefs函数

1、通过一个案例,引出storeToRefs函数

①我们不想使用.来获取store中的属性了,于是尝试直接解构store,来获取属性

②运行项目,查看效果

2、使用storeToRefs函数来解决上述问题

3、演示效果

4、注意:

①storeToRefs函数只能解构出store中的属性。

举例:

②如果想解构出store中的方法,那么不能加storeToRefs,而是直接解构

举例:

五、Pinia调试

1、在浏览器上,下载vue.js devtools插件

2、右击项目页面,点击检查,点击vue

结语

        以上就是pinia的基本使用步骤、computed函数、异步action、storeToRefs函数、pinia调试的全部内容。

        本专栏【Pinia】的全部内容到此结束~

        想了解更多的前端知识,请关注本博主~~

相关文章:

Pinia之2:计数器案例、computed函数、异步action、storeToRefs函数、pinia调试

欢迎来到“雪碧聊技术”CSDN博客! 在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将…...

Microsoft Excel如何插入多行

1.打开要编辑的excel表,在指定位置,鼠标右键点击“插入”一行 2.按住shift键,鼠标的光标箭头会变化成如下图所示 3.一直按住shift键和鼠标左键,往下拖动,直至到插入足够的行...

Redis【1】- 如何阅读Redis 源码

1 Redis 的简介 Redis 实际上是简称,全称为 Remote Dictionary Server (远程字典服务器),由 Salvatore Sanfilippo 写的高性能 key-value 存储系统,其完全开源免费,遵守 BSD 协议。Redis 与其他 key-value 缓存产品(如…...

shell查看服务器的内存和CPU,实时使用情况

要查看服务器的内存和 CPU 实时使用情况,可以使用以下方法和命令: 1. 使用 top 运行 top 命令以显示实时的系统性能信息,包括 CPU 和内存使用情况。 top按 q 退出。输出内容包括: CPU 使用率:位于顶部,标…...

软件/游戏提示:mfc42u.dll没有被指定在windows上运行如何解决?多种有效解决方法汇总分享

遇到“mfc42u.dll 没有被指定在 Windows 上运行”的错误提示,通常是因为系统缺少必要的运行库文件或文件损坏。以下是多种有效的解决方法,可以帮助你解决这个问题: 原因分析 出现这个错误的原因是Windows无法找到或加载MFC42u.dll文件。这可…...

《Python基础》之函数、模块与库

目录 简介 一、函数 1、数学类函数 2、聚合类函数 3、和进制相关的函数 4、字符类函数 5、类型转换相关函数 6、获取输出类函数 二、模块与库的使用方法 1、模块和库的导入方法 2、第三方模块的下载 下载方法 简介 在Python编程的世界中,函数、模块和库是…...

selinux和防火墙实验

1 、 selinux 的说明 SELinux 是 Security-Enhanced Linux 的缩写,意思是安全强化的 linux 。 SELinux 主要由美国国家安全局( NSA )开发,当初开发的目的是为了避免资源的误用。 系统资源都是通过程序进行访问的,如…...

k8s Init:ImagePullBackOff 的解决方法

kubectl describe po (pod名字) -n kube-system 可查看pod所在的节点信息 例如&#xff1a; kubectl describe po calico-node-2lcxx -n kube-system 执行拉取前先把用到的节点的源换了 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"re…...

Spring AOP相关知识详解

难 文章目录 1.AOP介绍1.1 面向切面编程 - Aspect Oriented Programming (AOP)1.2 优点 2.AOP的概念2.1 连接点、切入点、通知、切面&#xff1a;2.2 注解2.2.1 通知类型2.2.1.1 通知的优先级排序 2.2.2 其他重要注解2.2.3 示例代码&#xff08;四种通知&#xff09; 3.Spring …...

selinux和防火墙

第七章 selinux 一、selinux的说明 SELinux&#xff1a;安全强化的 linux&#xff0c;Security-Enhanced Linux的缩写 SELinux &#xff1a; 由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;目的是为了避免资源的误用 SELinux&#xff1a; 是对程序、文件等权…...

【vue for beginner】Composition API 和 Options API 的区别

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 vue2中的方式叫Options API &#xff0c;vue3中叫Composition API。 Composition…...

jmeter5.6.3安装教程

一、官网下载 需要提前配置好jdk的环境变量 jmeter官网&#xff1a;https://jmeter.apache.org/download_jmeter.cgi 选择点击二进制的zip文件 下载成功后&#xff0c;默认解压下一步&#xff0c;更改安装路径就行(我安装在D盘) 实用jmeter的bin目录作为系统变量 然后把这…...

关于Spring基础了解

Spring简介 Spring框架是一个开源的Java应用框架&#xff0c;旨在简化企业级应用程序的开发。它提供了一系列强大的工具和服务&#xff0c;帮助开发者构建高质量的Java应用程序。Spring框架的核心理念是使开发过程更加模块化、可测试和可维护。 主要特性 依赖注入&#xff08…...

输入json 达到预览效果

下载 npm i vue-json-pretty2.4.0 <template><div class"newBranchesDialog"><t-base-dialogv-if"addDialogShow"title"Json数据配置"closeDialog"closeDialog":dialogVisible"addDialogShow":center"…...

DataLoade类与list ,iterator ,yield的用法

1 问题 探索DataLoader的属性&#xff0c;方法 Vscode中图标含意 list 与 iterator 的区别&#xff0c;尤其yield的用法 2 方法 知乎搜索DataLoader的属性&#xff0c;方法 pytorch基础的dataloader类是 from torch.utils.data.dataloader import Dataloader 其主要的参数如下&…...

model_selection.train_test_split函数介绍

目录 model_selection.train_test_split函数实战 model_selection.train_test_split函数 model_selection.train_test_split 是 Scikit-Learn 中用于将数据集拆分为训练集和测试集的函数。这个函数非常有用&#xff0c;因为在机器学习中&#xff0c;我们通常需要将数据集分为训…...

Springboot 读取 resource 目录下的Excel文件并下载

代码示例: GetMapping("/download") public void download(HttpServletResponse response) {try {String filename "测试.xls";OutputStream outputStream response.getOutputStream();// 获取springboot resource 路径下的文件InputStream inputStream…...

SQL EXISTS 子句的深入解析

SQL EXISTS 子句的深入解析 引言 SQL&#xff08;Structured Query Language&#xff09;作为一种强大的数据库查询语言&#xff0c;广泛应用于各种数据库管理系统中。在SQL查询中&#xff0c;EXISTS子句是一种非常实用的工具&#xff0c;用于检查子查询中是否存在至少一行数…...

33.Java冒泡排序

冒泡排序&#xff1a; 一种排序的方式&#xff0c;对要进行排序的数据中相邻的数据进行两两比较&#xff0c;将较大的数据放在后面&#xff0c;依次对所有的数据进行操作&#xff0c;直至所有数据按要求完成排序. package Javase;import sun.security.util.ByteArrayTagOrder…...

Docker容器ping不通外网问题排查及解决

Docker容器ping不通外网问题排查及解决 解决方案在最下面&#xff0c;不看过程的可直接拉到最下面。 一台虚拟机里突然遇到docker容器一直访问外网失败&#xff0c;网上看到这个解决方案&#xff0c;这边记录一下。 首先需要明确docker的网桥模式&#xff0c;网桥工作在二层…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

HTTPS证书一年多少钱?

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...

CTF show 数学不及格

拿到题目先查一下壳&#xff0c;看一下信息 发现是一个ELF文件&#xff0c;64位的 ​ 用IDA Pro 64 打开这个文件 ​ 然后点击F5进行伪代码转换 可以看到有五个if判断&#xff0c;第一个argc ! 5这个判断并没有起太大作用&#xff0c;主要是下面四个if判断 ​ 根据题目…...

【多线程初阶】单例模式 指令重排序问题

文章目录 1.单例模式1)饿汉模式2)懒汉模式①.单线程版本②.多线程版本 2.分析单例模式里的线程安全问题1)饿汉模式2)懒汉模式懒汉模式是如何出现线程安全问题的 3.解决问题进一步优化加锁导致的执行效率优化预防内存可见性问题 4.解决指令重排序问题 1.单例模式 单例模式确保某…...

轻量安全的密码管理工具Vaultwarden

一、Vaultwarden概述 Vaultwarden主要作用是提供一个自托管的密码管理器服务。它是Bitwarden密码管理器的第三方轻量版&#xff0c;由国外开发者在Bitwarden的基础上&#xff0c;采用Rust语言重写而成。 &#xff08;一&#xff09;Vaultwarden镜像的作用及特点 轻量级与高性…...

【Go语言基础【6】】字符串格式化说明

文章目录 零、格式化常用场景一、Go 字符串格式化核心概念二、常用格式化占位符1. 整数类型2. 浮点数类型3. 字符串与布尔类型4. 指针与通用类型 三、宽度与精度控制1. 宽度控制2. 精度控制&#xff08;浮点数/字符串&#xff09; 零、格式化常用场景 数值转字符串&#xff1a…...

Continue 开源 AI 编程助手框架深度分析

Continue 开源 AI 编程助手框架深度分析 一、项目简介 Continue 是一个模块化、可配置、跨平台的开源 AI 编程助手框架&#xff0c;目标是让开发者能在本地或云端环境中&#xff0c;快速集成和使用自定义的 LLM 编程辅助工具。它通过支持 VS Code 与 JetBrains 等主流 IDE 插件…...