Vue3+ts(day07：pinia)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈（笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】，记录一下学习笔记，用于自己复盘，有需要学习的可以去b站学习原版视频）

一、准备一个效果

App组件：

<template>
  <Count></Count>
  <br />
  <LoveTalk></LoveTalk>
</template>

<script setup lang="ts" name="App">
import Count from './components/Count.vue'
import LoveTalk from './components/LoveTalk.vue'
</script>

<style scoped></style>

Count组件：

<template>
  <div class="count">
    <h2>当前求和为：{
  
  { 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 } 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 {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  background-color: skyblue;
}
select,
button {
  margin: 0px 5px;
  height: 25px;
}
</style>

LoveTalk组件：

<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkLis