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.value

  function 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可以设置极限值

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB】哈里斯鹰优化(HHO)

发表在中科院二区Future Generation Computer Systems期刊上的论文“Harris hawks optimization: Algorithm and applications" 01.引言 本文提出了一种基于种群的、受自然启发的优化范式&#xff0c;称为Harris Hawks Optimizer (HHO)。HHO的主要灵感来源于自然界中哈里…

day64 单调栈part03

柱状图中最大的矩形 困难 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 看了一圈 最后还是别的题解几句话看明白了 明确一点&#xff0c;遍历每个高…

004 CSS介绍2

文章目录 css最常用属性link元素进制css颜色表示浏览器的渲染流程(不含js) css最常用属性 font-size 文字大小 color:前景色(文字颜色) background-color:背景色 width:宽度 height:高度 link元素 也可以用来创建站点图标 link元素常见属性 href:指定被链接资源的URL rel:指…

Proxifier监控流量转发Charles

Charles开启 SOCKS Proxy 在Proxifier的Proxy Servers选项中点击add添加如下规则&#xff1a;127.0.0.1:8889&#xff0c; 端口号8889对应Charles开放的端口号&#xff0c; 选择SOCKS5&#xff0c;支持监控http和https 配置好之后点击Check进行验证, 点击Test Settings选项&…

二.音视频编辑-媒体组合-播放

引言 当涉及到音视频编辑时&#xff0c;媒体资源的提取和组合是至关重要的环节。在iOS平台上&#xff0c;AVFoundation框架提供了丰富而强大的功能&#xff0c;使得媒体资源的操作变得轻松而高效。从原始的媒体中提取片段&#xff0c;然后将它们巧妙地组合成一个完整的作品&am…

SV学习笔记(二)

接口 什么是接口&#xff1f; 接口 主要用作验证 &#xff0c;国外有些团队会使用sv进行设计&#xff0c;那么接口就会用作设计。验证环境中&#xff0c;接口可以 使连接变得简洁而不易出错 。interface和module的使用性质很像&#xff0c; 可以定义端口&#xff0c;也可以定…

文心一言 VS 讯飞星火 VS chatgpt (230)-- 算法导论17.1 1题

一、如果栈操作包括 MULTIPUSH 操作&#xff0c;它将 k 个数据项压入栈中&#xff0c;那么栈操作的摊还代价的界还是 O(1) 吗? 文心一言&#xff1a; 在栈的基本操作中&#xff0c;我们通常考虑的是单个元素的压入&#xff08;push&#xff09;和弹出&#xff08;pop&#x…

升级程序到Java21的记录二(修改程序源代码)

背景 :参看 《升级程序到Java21的记录一&#xff08;先升级jdk到21&#xff09;》&#xff0c; Jdk升级完毕&#xff0c;下面我们该秀修改程序源代码了&#xff0c; 程序最初使用的springboot2.6.8 以及jdk17。为了使用springboot 3.0&#xff08;3.0开始有支持虚拟线程的相关…

抖音运营技巧

1、视频时长 抖音的作品是否能够继续被推荐&#xff0c;取决于综合数据&#xff0c;包括完播率、点赞率、评论率、转发率和收藏率等。其中&#xff0c;完播率是最容易控制的因素。对于新号来说&#xff0c;在没有粉丝的初期&#xff0c;发布过长的视频可能会导致无人观看。因此…

Day31|贪心算法part01:理论基础、455.分发饼干、376. 摆动序列、53. 最大子序和

理论基础 记得贪心没有规律即可&#xff01;解不出来就看题解。 455. 分发饼干 先把学生和饼干都排序&#xff08;Arrays.sort只能升序&#xff09;&#xff0c;然后都从后往前遍历&#xff0c;把最大的饼干给需求最大的孩子&#xff08;贪心&#xff09; class Solution {…

4核8G服务器配置性能怎么样?4核8G12M配置服务器能干啥?

腾讯云4核8G服务器多少钱&#xff1f;腾讯云4核8G轻量应用服务器12M带宽租用价格646元15个月&#xff0c;活动页面 txybk.com/go/txy 活动链接打开如下图所示&#xff1a; 腾讯云4核8G服务器优惠价格 这台4核8G服务器是轻量应用服务器&#xff0c;详细配置为&#xff1a;轻量4核…

内网安全之-kerberos协议

kerberos协议是由麻省理工学院提出的一种网络身份验证协议&#xff0c;提供了一种在开放的非安全网络中认证识别用户身份信息的方法。它旨在通过使用秘钥加密技术为客户端/服务端应用提供强身份验证&#xff0c;使用kerberos这个名字是因为需要三方的共同参与才能完成一次认证流…

【C++】stack和queue

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. stack的介绍和使用1.1 stack的介绍1.2 stack的使用1.3 stack的模拟实现 2. queue的介绍和使用2.1 queue的介绍2.2 queue的使用2.3 queue的模拟实现 3. 容器适配器3.1 概念3.2 STL标准库中stack和queue的底层结构3.…

@RequestParam和@PathVariable的区别

同样都是接收URL中的参数&#xff0c;RequestParam和PathVariable有什么区别呢&#xff1f;

随手集☞Spring知识盘点

概述 定义 Spring框架的提出者是程序员Rod Johnson&#xff0c;他在2002年最早提出了这个框架的概念&#xff0c;随后创建了这个框架。Spring框架的目标是简化企业级Java应用程序的开发&#xff0c;通过提供一套全面的工具和功能&#xff0c;使开发者能够更加高效地构建高质量…

Prometheus+grafana环境搭建MongoDB(docker+二进制两种方式安装)(五)

由于所有组件写一篇幅过长&#xff0c;所以每个组件分一篇方便查看&#xff0c;前四篇mongodb的exporter坑也挺多总结一下各种安装方式&#xff0c;方便后续考古。 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabb…

5分钟润色一篇论文:ChatGPT意味着什么?Nature连发两篇文章探讨

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

服务器硬件构成与性能要点:CPU、内存、硬盘、RAID、网络接口卡等关键组件的基础知识总结

文章目录 服务器硬件基础知识CPU&#xff08;中央处理器&#xff09;内存&#xff08;RAM&#xff09;硬盘RAID&#xff08;磁盘阵列&#xff09;网络接口卡&#xff08;NIC&#xff09;电源散热器主板显卡光驱 服务器硬件基础知识 服务器是一种高性能计算机&#xff0c;用于在…

第1章:芯片及引脚介绍

芯片及引脚介绍 1&#xff1a; 芯片介绍1.1&#xff1a;芯片系列1.2 &#xff1a;STM32F103C8T6型号的介绍 2&#xff1a;引脚2.1&#xff1a;寄存器2.2&#xff1a;最小系统板 3&#xff1a;最小系统板的引脚3.1&#xff1a;特殊引脚3.2&#xff1a;普通引脚3.3&#xff1a;最…

Linux之信号

1.常见信号 虽然最开始的编号是1&#xff0c;最后的编号是64&#xff0c;但是并不是有64个信号&#xff0c;没有32和33号信号&#xff0c;也就是说&#xff0c;一共有62个信号&#xff0c;前31个信号是标准信号&#xff08;非实时信号&#xff09;&#xff0c;后31个信号是实时…