第二十四:5.2【搭建 pinia 环境】axios 异步调用数据

news/2025/2/27 8:48:06

第一步安装:npm install pinia

第二步:操作src/main.ts

改变里面的值的信息:

<div class="count">
    <h2>当前求和为:{{ sum }}</h2>
    <select v-model.number="n">  // .number 这里是解决整数问题
      <option value="1">1</option>
      <option value="2">2</option>  // 如果要整数的话:  :value
      <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>

安装 axios    : npm i axios

快速引入: import axios from "axios";

安装: npm i nanoid    // 安装唯一id 扩展

https://api.uomg.com/api/rand.qinghua?format=json

整个区域代码:

<template>
    <div class="talk">
      <button @click="getLoveTalk">获取一句土味情话</button>
      <ul>
        <li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>
      </ul>
    </div>
  </template>
  
  <script setup lang="ts" name="LoveTalk">
    import {reactive} from 'vue'
    import axios from "axios";
    import {nanoid} from 'nanoid'
    // 数据
    let talkList = reactive([
      {id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},
      {id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},
      {id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}
    ])
    // 方法
    async function getLoveTalk(){
      // 发请求,下面这行的写法是:连续解构赋值+重命名
      let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
      // 把请求回来的字符串,包装成一个对象
      let obj = {id:nanoid(),title}
      // 放到数组中
      talkList.unshift(obj)
    }
  </script>
  
  <style scoped>
    .talk {
      background-color: orange;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 0 10px;
    }
  </style>


http://www.niftyadmin.cn/n/5869823.html

相关文章

优选算法的灵动之章:双指针专题(一)

个人主页&#xff1a;手握风云 专栏&#xff1a;算法 目录 一、双指针算法思想 二、算法题精讲 2.1. 查找总价格为目标值的两个商品 2.2. 盛最多水的容器 ​编辑 2.3. 移动零 2.4. 有效的三角形个数 一、双指针算法思想 双指针算法主要用于处理数组、链表等线性数据结构…

【Keil5教程及技巧】耗时一周精心整理万字全网最全Keil5(MDK-ARM)功能详细介绍【建议收藏-细细品尝】

&#x1f48c; 所属专栏&#xff1a;【单片机开发软件技巧】 &#x1f600; 作  者&#xff1a; 于晓超 &#x1f680; 个人简介&#xff1a;嵌入式工程师&#xff0c;专注嵌入式领域基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大家&#xff1…

计算机视觉(opencv-python)入门之常见图像预处理操作(待补充)

图像预处理是计算机视觉任务中的关键步骤&#xff0c;它通过对原始图像进行处理&#xff0c;以提高后续图像分析、特征提取和识别的准确性。 示例图片 常见图像预处理方法 灰度化处理 法一 #灰度化处理 #法1&#xff0c;直接读取灰度图 import cv2 gray_imagecv2.imread(te…

天猫代运营公司推荐:品融电商

天猫代运营公司推荐&#xff1a;品融电商 在电商行业竞争日益激烈的今天&#xff0c;选择一家专业的天猫代运营公司成为众多品牌商家提升市场竞争力、实现销售增长的关键。在众多代运营公司中&#xff0c;品融电商凭借其专业的团队、丰富的经验和显著的成功案例&#xff0c;脱…

Docker usage on ubuntu

1. Transfer docker image to another machine # save image in machine A $ docker save -o myDockerImage.tar myDockerImage.tar:latest # copy myDockerImage.tar to another machine and load $ docker load -i myDockerImage.tar # check via $ docker images

6 - 预处理器

文章目录 一、宏1、宏定义 - 空格问题2、宏调用 二、宏不是函数 一、宏 1、宏定义 - 空格问题 #define f (x) ((x) - 1) /* error */ #define f(x) ((x) - 1) /* ok */2、宏调用 printf("f(3): %d, f (3): %d\n", f(3), f (3));二、宏不是函数 更新 ing

期权帮|股指期货基差和价差有什么区别?

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货基差和价差有什么区别&#xff1f; 一、股指期货基差 股指期货基差是指股指期货价格与其对应的现货指数价格之间的差额。 股指期货基差计算公式&#xff1a;基差 现…

第75节 绘制圆形(arc)

在 HarmonyOS 开发中&#xff0c;如果你使用的是 TypeScript (TS) 语法&#xff0c;并且你正在处理画布&#xff08; Canvas &#xff09;相关的功能&#xff0c; arc 和 arcTo 是两个用于绘制弧线的 Canvas API 方法。下面是如何在 HarmonyOS 中使用这两个方法的详细说…