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

第一步安装：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>