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

第二十八:5.5.【storeToRefs】5.6.【getters】

LoveTalk.vue: 调用:

// 方法

const talkStore = useTalkStore()

function getLoveTalk(){

talkStore.getATalk()

}

如果是要简短的形式调用:

const talkStore = useTalkStore() // user hooks 的形式调用

const {schoole,local} = talkStore   // 通过这个方式调用

在页面就可以简单调用 不talkStore. schoole  , 而是直接: schoole  的形式调用

因为 这样的不能动态调用响应式操作:最后执行:

/* 使用storeToRefs转换countStore,随后解构 */

注意:使用 storeToRefs 一定要引入:

import { storeToRefs } from "pinia";

const {schoole,local} = storeToRefs(talkStore)

LoveTalk.ts:

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'export const useTalkStore = defineStore('talk',{actions:{async getATalk(){// 发请求,下面这行的写法是:连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串,包装成一个对象let obj = {id:nanoid(),title}// 放到数组中this.talkList.unshift(obj)}},// 真正存储数据的地方state(){return {talkList:[{id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},{id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},{id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}]}}
})

5.5.【storeToRefs】

  • 借助storeToRefsstore中的数据转为ref对象,方便在模板中使用。

  • 注意:pinia提供的storeToRefs只会将数据做转换,而VuetoRefs会转换store中数据。

<template><div class="count"><h2>当前求和为:{{sum}}</h2></div>
</template>
​
<script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'
​/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore,随后解构 */const {sum} = storeToRefs(countStore)
</script>
​

5.6.【getters】

5.6.【getters】

  1. 概念:当state中的数据,需要经过处理后再使用时,可以使用getters配置。

  2. 追加getters配置。

    // 引入defineStore用于创建store
    import {defineStore} from 'pinia'
    ​
    // 定义并暴露一个store
    export const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'atguigu'}}, // 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
    })
  3. 组件中读取数据:

    const {increment,decrement} = countStore
    let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

相关文章:

第二十八:5.5.【storeToRefs】5.6.【getters】

LoveTalk.vue: 调用&#xff1a; // 方法 const talkStore useTalkStore() function getLoveTalk(){ talkStore.getATalk() } 如果是要简短的形式调用&#xff1a; const talkStore useTalkStore() // user hooks 的形式调用 const {schoole,local} talkStore // …...

APISIX Dashboard上的配置操作

文章目录 登录配置路由配置消费者创建后端服务项目配置上游再创建一个路由测试 登录 http://192.168.10.101:9000/user/login?redirect%2Fdashboard 根据docker 容器里的指定端口&#xff1a; 配置路由 通过apisix 的API管理接口来创建&#xff08;此路由&#xff0c;直接…...

MinIO在 Docker中修改登录账号和密码

MinIO在 Docker中修改登录账号和密码 随着云计算和大数据技术的快速发展&#xff0c;对象存储服务逐渐成为企业数据管理的重要组成部分。MinIO 作为一种高性能、分布式的对象存储系统&#xff0c;因其简单易用、高效可靠的特点而备受开发者青睐。然而&#xff0c;在实际应用中…...

英文论文查重,Turnitin和IThenticate两个系统哪个更合适?

Turnitin系统和IThenticate系统都是检测英文论文的查重系统&#xff0c;但是两者之间还是有一些不一样的。 下面针对这两个系统给大家具体分析一下。 一、Turnitin系统 Turnitin检测系统&#xff1a; https://truth-turnitin.similarity-check.com Turnitin是世界上主流的…...

pnpm的基本用法

以下是 pnpm 的核心命令和使用指南&#xff0c;涵盖从安装依赖到项目管理的常见操作&#xff1a; 1. 基础命令 (1) 安装依赖 pnpm install # 安装 package.json 中的所有依赖 pnpm install <包名> # 安装指定包&#xff08;自动添加到 dependencies&#xf…...

【实战中提升自己】防火墙篇之双ISP切换与VRRP切换对于用户的体验

! 拓扑与说明 某公司的网络架构&#xff0c;这样的架构在目前的网络中是在常见的&#xff0c;假设您接收一个这样的网络&#xff0c;应该如何部署&#xff0c;该实战系列&#xff0c;就是一步一步讲解&#xff0c;如何规划、设计、部署这样一个环境&#xff0c;这…...

Go在1.22版本修复for循环陷阱

记录 前段时间升级Go版本碰到一个大坑&#xff0c;先记录。 先上代码案例&#xff1a; func main() {testClosure() }func testClosure() {for i : 0; i < 5; i {defer func() {fmt.Println(i)}()} }在1.22之下&#xff08;不包括1.22&#xff09;版本&#xff1a; 输出的…...

Nginx+PHP+MYSQL-Ubuntu在线安装

在 Ubuntu 上配置 Nginx、PHP 和 MySQL 的步骤如下&#xff1a; 1. 更新系统包 首先&#xff0c;确保系统包是最新的&#xff1a; sudo apt update sudo apt upgrade2. 安装 Nginx 安装 Nginx&#xff1a; sudo apt install nginx启动并启用 Nginx 服务&#xff1a; sudo…...

SpringDataJPA使用deleteAllInBatch方法逻辑删除失效

概述 在使用Spring Boot JPA时&#xff0c;执行批量删除操作时&#xff0c;遇到逻辑删除失效的问题。具体而言&#xff0c;当使用deleteAllInBatch方法时&#xff0c;数据会被物理删除&#xff0c;而不是进行逻辑删除&#xff1b;但是当使用deleteAll时&#xff0c;逻辑删除操…...

DOM Node

DOM Node 引言 在Web开发中,DOM(Document Object Model)节点是构建网页和交互式应用程序的核心。DOM节点是文档的构建块,可以用来表示HTML和XML文档中的任何部分。本文将详细介绍DOM节点的基本概念、类型、操作方法以及在实际开发中的应用。 什么是DOM节点? DOM节点是…...

基于STM32的智能家居能源管理系统

1. 引言 传统家庭能源管理存在能耗监控粗放、设备联动不足等问题&#xff0c;难以适应绿色低碳发展需求。本文设计了一款基于STM32的智能家居能源管理系统&#xff0c;通过多源能耗监测、负荷预测与优化调度技术&#xff0c;实现家庭能源的精细化管理与智能优化&#xff0c;提…...

智慧园区后勤单位消防安全管理:安全运营和安全巡检

//智慧园区消防管理困境大曝光 智慧园区&#xff0c;听起来高大上&#xff0c;但消防管理却让人头疼不已。各消防子系统各自为政&#xff0c;像一座座孤岛&#xff0c;信息不共享、不协同。 消防设施管理分散&#xff0c;不同区域、企业的设备标准不一样&#xff0c;维护情况…...

HTML 日常开发常用标签

文章目录 HTML 日常开发常用标签1、基本结构标签2、内容标签3、多媒体标签4、表单标签5、列表和定义标签6、表格标签7、链接和图像8、元数据9、语义化标签&#xff08;HTML5新增&#xff09;10、框架和内联11、交互12、过时或不推荐使用的标签 HTML 日常开发常用标签 1、基本结…...

Spring事务失效六大场景

引言 Spring事务一般我们采用注解实现&#xff0c;但是我们构造事务实现的时候常常没察觉失效的情况&#xff0c;本篇文章总结事务失效的六大情况&#xff0c;帮助我们深刻理解事务失效的边界概念 1. 方法自调用 这个主要是针对声明式事务的&#xff0c;经过前面的介绍&…...

【缓冲区】数据库备份的衍生问题,缓冲区在哪里?JVMor操作系统?(二)

【缓冲区】数据库备份的衍生问题&#xff0c;缓冲区在哪里&#xff1f;JVMor操作系统&#xff1f;&#xff08;二 完结&#xff09; 缓冲区既属于操作系统&#xff0c;也属于 JVM&#xff0c;具体取决于你讨论的是哪个层面的缓冲区。下面我会详细解释这两者的区别和联系。 1. …...

如何免费使用稳定的deepseek

0、背景&#xff1a; 在AI辅助工作中&#xff0c;除了使用cursor做编程外&#xff0c;使用deepseek R1进行问题分析、数据分析、代码分析效果非常好。现在我经常会去拿行业信息、遇到的问题等去咨询R1&#xff0c;也给了自己不少启示。但是由于官网稳定性很差&#xff0c;很多…...

钉钉小程序(企业内部应用)开发--钉钉小程序web-view嵌套H5与小程序之间的通信(H5跳转钉钉小程序小程序postMessage)

钉钉小程序代码&#xff1a;嵌套H5 pages/login/index.axml <web-view src"{{urlH5}}" onMessage"test"></web-view> H5向小程序发送信息&#xff1a; H5代码&#xff1a; 通过以下代码我一直报错dd没有被定义 if (navigator.userAgent.to…...

超级免费/牛的图片格式转换工具jpg/jpeg/png

选择多次图片文件&#xff0c;并在所有图片选择完后进行批量转换。这种需求可以通过tkinter来实现&#xff0c;它是Python的标准GUI库&#xff0c;能够提供一个简洁的界面来选择文件和执行操作。您的代码要是网络运行不流畅可以试试它​​​​​​​ 下面是一个简单的GUI程序&a…...

毛泽东思想“活的灵魂”

关于毛泽东思想“活的灵魂”的构成及其内涵&#xff0c;综合历史文献与权威表述&#xff0c;核心内容整理如下&#xff1a; 一、毛泽东思想活的灵魂的权威定义 根据十一届六中全会《关于建国以来党的若干历史问题的决议》&#xff08;1981年&#xff09;&#xff0c;毛泽东思想…...

RabbitMQ系列(三)基本概念之Consumer

在 RabbitMQ 中&#xff0c;Consumer&#xff08;消费者&#xff09; 是负责从队列&#xff08;Queue&#xff09;中获取并处理消息的客户端角色&#xff0c;其核心机制与功能如下&#xff1a; 一、Consumer 的定义与核心作用 消息处理终端 Consumer 通过订阅或拉取队列中的消…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…...

起重机起升机构的安全装置有哪些?

起重机起升机构的安全装置是保障吊装作业安全的关键部件&#xff0c;主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理&#xff1a; 一、超载保护装置&#xff08;核心安全装置&#xff09; 1. 起重量限制器 功能&#xff1a;实时监测起升载荷&a…...

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...