vue3 hooks

创建hooks

useDog.ts

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

export default () => {
    // 数据
    let dogList = reactive([
        'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
      ])
    
    // 方法
    async function getDog(){
        try {
          let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
          console.log(result.data.message)
          dogList.push(result.data.message)
        } catch (error) {
          alert(error)
        }
      }

    // 向外部提供东西
    return {dogList,getDog}
}

useSum.ts

import { ref } from 'vue';

export default () =>{
    // 数据
    let sum = ref(0)

    // 方法
    function addSum(){
      sum.value += 1
    }

    // 向外部提供东西
    return {sum,addSum}
}

vue中使用hooks

Person.vue

<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="addSum">点我sum+1</button>
    <hr>
    <img v-for="(dog,index) in dogList" :src="dog" alt="" :key="index"><br>
    <button @click="getDog">再来一只狗</button>
  </div>
</template>

// setup 语法糖
<script lang="ts" name="Person" setup>

// 引入hooks资源
import useSum from '../hooks/useSum';
import useDog from '../hooks/useDog';

// 调用hooks方法
const {sum,addSum} = useSum()
const {dogList,getDog} = useDog()


</script>