小白了解Pinia第2集 · 三大核心状态Getters、Actions以及Plugins 插件

三大核心状态

state

第1集有详细讲解:https://blog.csdn.net/qq_51463650/article/details/137137080?spm=1001.2014.3001.5501

getters

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用:

export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},
})

大多数时候,getter 只会依赖状态,但是,他们可能需要使用其他 getter。 正因为如此,我们可以在定义常规函数时通过 this 访问到_whole store instance_ 但是需要定义返回类型的类型(在 TypeScript 中)。 这是由于 TypeScript 中的一个已知限制,并且不会影响使用箭头函数定义的 getter,也不会影响不使用 this 的 getter:

export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {// 自动将返回类型推断为数字doubleCount(state) {return state.count * 2},// 返回类型 **必须** 明确设置doublePlusOne(): number {// 整个商店的自动完成和填写return this.doubleCount + 1},},
})

然后你可以直接在 store 实例上访问 getter:

<template><p>Double count is {{ store.doubleCount }}</p>
</template><script>
export default {setup() {const store = useCounterStore()return { store }},
}
</script>

actions

Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义,并且它们非常适合定义业务逻辑:

项目中有一个简单的存入与销毁的方法,看下图;
在这里插入图片描述
getters 一样,操作可以通过 this 访问 whole store instance 并提供完整类型(和自动完成)支持。 与 getter 不同,actions 可以是异步的,您可以在任何 API 调用甚至其他操作的操作中await

这是使用 Mande 的示例。 请注意,只要您获得“Promise”,您使用的库并不重要,您甚至可以使用本机的“fetch”函数(仅限浏览器):

import { mande } from 'mande'const api = mande('/api/users')export const useUsers = defineStore('users', {state: () => ({userData: null,// ...}),actions: {async registerUser(login, password) {try {this.userData = await api.post({ login, password })showTooltip(`Welcome back ${this.userData.name}!`)} catch (error) {showTooltip(error)// 让表单组件显示错误return error}},},
})

在这里插入图片描述

Plugins 插件

在这里插入图片描述

Pinia 插件是一个函数,可以选择返回要添加到商店的属性。 它需要一个可选参数,一个 context:

export function myPiniaPlugin(context) {context.pinia // 使用 `createPinia()` 创建的 piniacontext.app // 使用 `createApp()` 创建的当前应用程序(仅限 Vue 3)context.store // 插件正在扩充的商店context.options // 定义存储的选项对象传递给`defineStore()`// ...
}

然后使用 pinia.use() 将此函数传递给 pinia:

pinia.use(myPiniaPlugin)

插件仅适用于在将pinia传递给应用程序后创建的商店,否则将不会被应用。

废了废了,暂且这样吧~~

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

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

相关文章

Elastic 8.13:Elastic AI 助手中 Amazon Bedrock 的正式发布 (GA) 用于可观测性

作者&#xff1a;来自 Elastic Brian Bergholm 今天&#xff0c;我们很高兴地宣布 Elastic 8.13 的正式发布。 有什么新特性&#xff1f; 8.13 版本的三个最重要的组件包括 Elastic AI 助手中 Amazon Bedrock 支持的正式发布 (general availability - GA)&#xff0c;新的向量…

汽车电子行业知识:什么是智能驾驶辅助系统(ADAS)

文章目录 1. 什么是智能驾驶辅助系统&#xff08;ADAS&#xff09;1.1 ADAS的功能1.2 ADAS的优势1.3 未来发展趋势 2. ADAS等级2.1. 0级驾驶辅助2.2. 1级驾驶辅助2.3. 2级驾驶辅助2.4. 3级驾驶辅助2.5. 4级和5级驾驶辅助 3. 智能车4. ADAS供应商 1. 什么是智能驾驶辅助系统&…

文章分享:协和文章《病原宏基因组高通量测序性能确认方案》

摘要&#xff1a;宏基因组学利用新一代高通量测序技术&#xff0c;以特定环境下病原体基因组为研究对象&#xff0c;在分析病原体多样性、种群结构、进化关系的基础上&#xff0c;进一步探究病原体的群体功能活性、相互作用及其与环境之间的关系&#xff0c;发掘潜在的生物学意…

STM32之HAL开发——串口配置(CubeMX)

串口引脚初始化&#xff08;CubeMX&#xff09; 选择RCC时钟来源 选择时钟频率&#xff0c;配置为最高频率72MHZ 将单片机调试模式打开 SW模式 选择窗口一配置为异步通信模式 点击IO口设置页面&#xff0c;可以看到当前使用的串口一的引脚。如果想使用复用功能&#xff0c;只需…

每天五分钟深度学习:使用神经网络完成人脸的特征点检测

本文重点 我们上一节课程中学习了如何利用神经网络对图片中的对象进行定位,也就是通过输出四个参数值bx、by、bℎ和bw给出图片中对象的边界框。 本节课程我们学习特征点的检测,神经网络可以通过输出图片中对象的特征点的(x,y)坐标来实现对目标特征的识别,我们看几个例子。…

前端发版上线出现白屏问题

目录 路由配置问题资源缓存问题首屏加载过慢 &#xff1a;喂&#xff0c;你的页面白啦&#xff01; 出现上线白屏的问题有很多&#xff0c;如&#xff1a;配置错误、缓存问题、浏览器兼容问题&#xff0c;根据不同情况去解决。 路由配置问题 问题描述&#xff1a; 在vue开发…

C语言中的联合体和枚举

联合体 联合体的创建 联合体的关键字是union union S {char a;int i; };除了关键字和结构体不一样之外&#xff0c;联合体的创建语法形式和结构体的很相似&#xff0c;如果不熟悉结构体的创建&#xff0c;可以看一下我上一篇的博客关于结构体知识的详解。 联合体的特点 联合…

HarmonyOS 应用开发之进程模型

系统的进程模型如下图所示。 应用中&#xff08;同一Bundle名称&#xff09;的所有UIAbility、ServiceExtensionAbility和DataShareExtensionAbility均是运行在同一个独立进程&#xff08;主进程&#xff09;中&#xff0c;如下图中绿色部分的“Main Process”。应用中&#x…

matlab及其在数字信号处理中的应用001:软件下载及安装

目录 一&#xff0c;matlab的概述 matlab是什么 matlab适用于的问题 matlab的易扩展性 二&#xff0c;matlab的安装 1&#xff0c;解压所有压缩文件 2&#xff0c;解压镜像压缩文件 3&#xff0c;运行setup.exe 4&#xff0c;开始安装 5&#xff0c;不要运行软件…

Python环境下基于深度学习的旋转机械故障诊断及其权重可视化

随着神经网络所要完成的任务越来越智能化&#xff0c;其内部的结构也变得越来越复杂&#xff0c;神经网络学到的解题方法也越来越难以被人类所理解。神经网络的内部单元就好比一个“黑箱”&#xff0c;虽然这种处理方法能够在某种程度上达到非常不错的效果&#xff0c;但其原因…

同城外卖多商户点餐系统平台开发JAVA版源码跑腿小程序APP

项目背景 在快节奏的现代生活中&#xff0c;人们对于时间的需求愈发敏感。如何在忙碌中兼顾生活与工作&#xff0c;如何在繁杂琐事中找到一丝便利&#xff0c;这已然成为众多都市人共同关心的议题。在这样的背景下&#xff0c;同城外卖跑腿系统软件应运而生&#xff0c;以其高…

Modbus转Profinet网关快速解决PLC插槽数量不够用的烦恼

通过Modbus转Profinet&#xff08;XD-MDPN100&#xff09;网关的应用&#xff0c;不仅可以实现Modbus设备与Profinet网络的平滑对接&#xff0c;还能有效解决PLC插槽限制和Modbus指令轮询等问题&#xff0c;Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;在解决PLC插…

Etcd 基本入门

1&#xff1a;什么是 Etcd ? Etcd 是 CoreOS 团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致性算法&#xff0c;Etcd基于 Go 语言实现。 名字由来&#xff0c;它源于两个方面&#xff0c;…

java将文件转成流文件返回给前端

环境&#xff1a;jdk1.8&#xff0c;springboot2.5.3,项目端口号&#xff1a;9100 1.待转换的文件 一、路径 二、文件内容 2.controller中代码 package com.example.pdf.controller;import com.example.pdf.service.GetFileStreamService; import org.springframework.web.b…

嵌入式linux学习之交叉编译器安装

交叉编译器介绍 ARM 裸机、Uboot 移植、Linux 移植这些都需要在 Ubuntu 下进行编译&#xff0c;编译就需要编译器&#xff0c;在 Liux 进行 C 语言开发里面使用 GCC 编译器进行代码编译&#xff0c;但是 Ubuntu 自带的 gcc 编译器是针对 X86 架构的&#xff01;而我们现在要编…

封装性练习

练习 1 &#xff1a; 创建程序&#xff1a;在其中定义两个类&#xff1a; Person 和 PersonTest 类。定义如下&#xff1a; 用 setAge() 设置人的合法年龄 (0~130) &#xff0c;用 getAge() 返回人的年龄。在 PersonTest 类中实例化 Person 类的对象 b &#xff0c;调用 set…

需要本地后端的真机调试-微信

打开和修改IP改为电脑与手机同一局域网的 不知道这个要不要

利用计算机视觉技术打造直播美颜工具:详解美颜SDK开发

本篇文章&#xff0c;小编将详解如何利用计算机视觉技术打造直播美颜工具&#xff0c;并深入探讨美颜SDK的开发过程。 一、美颜技术概述 在直播美颜工具中&#xff0c;美颜技术起到了至关重要的作用。美颜技术通过对图像进行实时处理&#xff0c;改善主播或用户的外观&#x…

C++——vector类及其模拟实现

前言&#xff1a;前边我们进行的string类的方法及其模拟实现的讲解。这篇文章将继续进行C的另一个常用类——vector。 一.什么是vector vector和string一样&#xff0c;隶属于C中STL标准模板库中的一个自定义数据类型&#xff0c;实际上就是线性表。两者之间有着很多相似&…

嵌入式3-29

今日作业&#xff1a;用fwrite 和 fseek功能&#xff0c;将一张bmp格式的图片更改成 德国国旗#include <stdio.h> #include <string.h> #include <stdlib.h> #include <math.h> typedef unsigned char bgr[3]; int main(int argc, const char *argv[])…