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