Vue3从入门到实战:掌握状态管理库pinia(上部分)

1.新的状态管理工具pinia 

Pinia 是一个状态管理库,通俗点讲,它的主要作用就是帮助我们在 Vue 3 应用中更好地管理和维护组件的状态。

举例子解释:

新建一个Count.vue文件,功能用来计数求和。

<template><div class="count"><h2>当前求和为:{{ sum }}</h2><select v-model="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="minus">减</button></div>
</template><script setup lang="ts" name="Count">import { ref } from "vue";// 数据let sum = ref(1) // 当前求和let n = ref(1) // 用户选择的数字// 方法function add(){sum.value += n.value}function minus(){sum.value -= n.value}
</script><style scoped>.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}select,button {margin: 0 5px;height: 25px;}
</style>

注意点1:

这样写不是加数字2,而是字符'串'2"。自然数字完成的不是叠加。

修改方式一:

 加上":",让后面的变成了表达式而不是字符。


修改方式二:

将输入的转换成数字(这种方式比较正统)


新建一个LoveTalk.vue文件

LoveTalk.vue代码:

<!-- 模板部分 -->  
<template>  <div class="talk">  <!-- 定义一个按钮,当点击时调用 getLoveTalk 方法 -->  <button @click="getLoveTalk">获取一句土味情话</button>  <!-- 定义一个无序列表,用于展示 talkList 中的土味情话 -->  <ul>  <li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>  </ul>  </div>  
</template>  <!-- 脚本部分 -->  
<script setup lang="ts" name="LoveTalk">  // 引入 Vue 的 reactive 函数,用于创建响应式数据  import {reactive} from 'vue'  // 引入 axios,一个基于 Promise 的 HTTP 客户端,用于发送网络请求  import axios from "axios";  // 引入 nanoid 库,用于生成唯一的字符串作为 ID  import {nanoid} from 'nanoid'  // 使用 reactive 创建响应式数组 talkList,用于存储土味情话  let talkList = reactive([  // 初始化 talkList,包含一些示例的土味情话  {id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},  {id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},  {id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}  ])  // 定义一个异步函数 getLoveTalk,用于获取新的土味情话  async function getLoveTalk(){  // 使用 await 等待 axios.get 的结果,并解构赋值获取数据内容  // 这里假设返回的数据结构是 {data:{content:''}}  let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')  // 使用 nanoid 生成一个唯一的 ID  let obj = {id:nanoid(),title}  // 将新获取的土味情话(包装成对象后)插入到 talkList 数组的最前面  talkList.unshift(obj)  }  
</script>  //样式<style scoped>.talk {background-color: orange;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}</style>

  1. 设置按钮点击事件:在按钮上使用了 @click 指令,绑定了一个名为 getLoveTalk 的方法,当按钮被点击时,会调用这个方法。

  2. 定义响应式数据:在 <script setup> 标签中,首先导入了 reactive 函数和 axiosnanoid 库。然后,使用 reactive 创建了一个响应式数组 talkList,并初始化了几个示例的土味情话。

  3. 定义异步方法:定义了一个名为 getLoveTalk 的异步方法。这个方法首先通过 axios.get 发送一个 HTTP GET 请求到指定的 API 地址,以获取新的土味情话。

  4. 处理请求结果:当请求成功后,使用解构赋值从响应数据中提取出 content 的值,并将其重命名为 title

  5. 生成唯一 ID:使用 nanoid 函数生成一个唯一的 ID,用于新获取的土味情话对象。

  6. 更新响应式数据:将新获取的土味情话(包括生成的 ID 和标题)包装成一个对象,并使用 unshift 方法将这个新对象插入到 talkList 数组的最前面。

  7. 列表渲染:在模板中,使用 v-for 指令遍历 talkList 数组,并为每个元素创建一个列表项,显示其 title 属性。

  8. 响应式更新:由于 talkList 是响应式的,当数组内容发生变化时,Vue 会自动更新 DOM,展示最新的土味情话列表。

这样,每当用户点击按钮时,组件就会发送请求获取新的土味情话,并将其添加到列表的最前面,实现了动态获取和展示土味情话的功能。

展示: 

 

2.安装pinia环境 

在终端安装pinia环境

在main.ts文件安装pinia

安装好后在Vue组件看见一个可爱的菠萝🍍图表 

main.ts代码:

import {createApp} from 'vue'
import App from './App.vue'
// 第一步:引入pinia
import {createPinia} from 'pinia'const app = createApp(App)
// 第二步:创建pinia
const pinia = createPinia()
// 第三步:安装pinia
app.use(pinia)
app.mount('#app')

 我丢,好可爱的菠萝🍍

3.存取+读取数据

步骤:

1.新建store文件夹

2.在此文件夹下新建count.ts文件

 Pinia中的store用于组织和管理组件间的共享状态。通过useCountStore函数,我们可以在Vue组件的setup函数中获取这个store的实例,进而读取或修改sum状态的值。  

3.在Count.vue文件进行修改。

 注意:因为countStore是reactive对象,sum作为ref包装的实例对象是被包括countStore在里面的

所以会被拆包,就不用sum.value。

通俗点说就是ref对象被包含在reactive对象里面就不用进行.value了。 

<template><div class="count"><h2>当前求和为:{{ countStore.sum }}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="minus">减</button></div>
</template><script setup lang="ts" name="Count">import { ref,reactive } from "vue";import {useCountStore} from '@/store/count'import { storeToRefs } from "pinia";const countStore = useCountStore()// 数据let n = ref(1) // 用户选择的数字// 方法function add(){countStore.sum += n.valuefunction minus(){countStore.sum -= n.value}
</script><style scoped>.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}select,button {margin: 0 5px;height: 25px;}
</style>

4.读取成功


  4.修改数据的三种方式

在count.s文件修改数据 

第一种修改方式:

第二种修改方式(有比较多的数据时)

 1.在count.ts增添两个数据

2.在Count.vue中修改 

当点击按钮"加"时,触发点击事件的加法方法(就刚刚编写的第二种修改方法) 

补充:

在第一种修改方式的基础上其实也可以进行,但是会添加修改的次数,就是浏览器要对每个数据信息修改一次,相当于三次。

但是使用$patch就可以进行批量修改。


第三种修改方式:action

1.在count.ts文件修改

2.在Count.vue文件进行调用

 展示如下

补充:

 action可以设置极限值

应用场景可以在某些条件下设置限定,当然在第二种方式上也可以。 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

气象数字孪生的主要功能模块

气象数字孪生是一种创新的技术应用&#xff0c;它通过创建现实世界气象条件的虚拟副本&#xff0c;为气象监测、预报和决策提供强大的支持。以下是气象数字孪生的主要功能模块。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.综合态…

Redis数据库③主从复制+哨兵模式+集群模式

一.Redis主从复制 1.概念 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(Master)&#xff0c;后者称为从节点(Slave)&#xff1b;数据的复制是单向的&#xff0c;只能由主节点到从节点。 默认情况下&#xff0c;每台…

UltraScale 架构 SelectIO 资源之IODELAY与IOSERDES仿真与使用

平台&#xff1a;vivado2018.3 具体内容见ug571-ultrascale-selectio IDELAYE3 在调试超高速信号的时候&#xff0c;需要使用iodelayiserdes来调试校准输入信号。例如外部某ADC采样率为5GHZ&#xff0c;外部ADC使用2.5GHZ的时钟去采集输入信号。为了实现采集&#xff0c;adc芯…

面试(03)————多线程和线程池

一、多线程 1、什么是线程?线程和进程的区别? 2、创建线程有几种方式 &#xff1f; 3、Runnable 和 Callable 的区别&#xff1f; 4、如何启动一个新线程、调用 start 和 run 方法的区别&#xff1f; 5、线程有哪几种状态以及各种状态之间的转换&#xff1f; 6、线程…

Scala大数据开发

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Scala简述 在此&#xff0c;简要介绍 Scala 的基本信息和情况。 Scala释义 Scala 源自于英语单词scalable&#xff0c;表示可伸缩的、可扩展的含义。 Scala作者 Scala编…

Arduino开发 esp32cam+opencv人脸识别距离+语音提醒

效果 低于20厘米语音提醒字体变红 QQ录屏20240406131651 Arduino代码 可直接复制使用&#xff08;修改自己的WIFI) #include <esp32cam.h> #include <WebServer.h> #include <WiFi.h> // 设置要连接的WiFi名称和密码 const char* WIFI_SSID "gumou&q…

Redis的配置文件详解

单位&#xff1a;Redis配置对大小写不敏感&#xff01; 注意这里&#xff1a;任何写法都可&#xff0c;不区分大小写。 units are case insensitive so 1GB 1Gb 1gB are all the same.包含&#xff1a;搭建Redis集群时&#xff0c;可以使用includes包含其他配置文件网络&…

基于单片机干湿垃圾自动分类系统

**单片机设计介绍&#xff0c;基于单片机干湿垃圾自动分类系统 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的干湿垃圾自动分类系统是一个集成传感器技术、机械控制和单片机编程于一体的自动化解决方案。该系统的主要目标是实…

静态路由协议实验综合实验

需求&#xff1a; 1、除R5的换回地址已固定外&#xff0c;整个其他所有的网段基于192.168.1.0/24进行合理的IP地址划分。 2、R1-R4每台路由器存在两个环回接口&#xff0c;用于模拟连接PC的网段&#xff1b;地址也在192.168.1.0/24这个网络范围内。 3、R1-R4上不能直接编写到…

在线视频教育平台|基于Springboot的在线视频教育平台系统设计与实现(源码+数据库+文档)

在线视频教育平台目录 基于Springboot的在线视频教育平台系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、前台&#xff1a; 2、后台 用户功能模块 教师功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&a…

【环境变量】基本概念理解 | 查看环境变量echo | PATH的应用和修改

目录 前言 基本概念&理解 注意的点 查看环境变量方法 PATH环境变量 PTAH应用系统指令 PTAH应用用户程序 命令行的修改&#xff08;内存级&#xff09; 配置文件的修改 windows环境变量 大家天天开心&#x1f642; bash进程的流程。环境变量在系统指令和用户…

springcloud第4季 springcloud-gateway网关的功能作用

一 网关 1.1 gateway的作用 网关可以实现&#xff1a; 权限过滤拦截&#xff0c;请求转发&#xff1b;组包拆包&#xff0c;加密解密&#xff0c;报文解析&#xff0c;协议转换等功能。 cloud gateway本身也是一个微服务&#xff0c;需要注册进服务到注册中心&#xff0c;从…