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

第一步安装：npm install pinia

第二步：操作src/main.ts

改变里面的值的信息：

Go 复制代码

<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

整个区域代码：

html 复制代码

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