[Vue3] hooks

App.vue

<template>
  <!-- 设定Person组件是否显示 -->
  <Person /> 
</template>
  
<script lang="ts" setup name="App">
  import Person from './components/Person.vue';
  
</script>

<style scoped>
/* 可以添加一些样式 */
</style>

新建文件夹：

src/hooks

新建文件：

hooks/useDog.ts

import { reactive } from 'vue'
import axios from 'axios'

export default function () { // 默认导出后面直接跟值，不用函数名
    // data
    let dogList = reactive([
        'https://images.dog.ceo/breeds/spaniel-cocker/n02102318_9680.jpg'
    ])
  
    function getDog() {
        // 发请求以获得图片
        axios.get('https://dog.ceo/api/breeds/image/random')
        dogList.push
        // try {
        //   let picture = await axios.
        // }
  }

  // return anything
  return {dogList, getDog}
}

hooks/useSum.ts

import { ref } from 'vue'

export default function () {
    // data
    let sum = ref(0)

    // function
    function add() {
    sum.value += 1
    }

    // return anything
    return {sum, add}
}

Person.vue

<template>
    <div class="person">
      {{ sum }}
      <button @click="add">+1</button>
      <hr>
      <img v-for="(dog, index) in dogList" :src="dog" :key="index">
      <br>
      <button @click="getDog">One more doge</button>
    </div>
</template>

<script lang="ts" setup name = "Person">
  import useSum from '@/hooks/useSum'
  import useDog from '@/hools/useDog'

  const {sum, add} = useSum()
  const {dogList, getDog} =useDog()
</script>

<style scoped>
  img {
    height: 100px;
    margin-right: 10px;
  }
</style>