自定义vue3 hooks

hooks

当页面内有很多的功能，js代码太多，不好维护，可以每个功能都有写一个js或者ts，这样的话，代码易读，并且容易维护，组合式setup写法与此结合👍👍🏼👍👍👍👍

目录结构

demo

• useDogs.ts

import { ref, reactive  } from 'vue';
import axios from 'axios';
// https://dog.ceo/api/breed/pembroke/images/random
export default function () {
    let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_1816.jpg']);
    async function getDog() {
        try {
            let res = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
            dogList.push(res.data.message);
            console.log(res.data);
        } catch (error) {
            console.log(error);
        }
    }
   
    return {dogList,getDog}
}

• useSum.ts

import { ref, reactive } from 'vue';
import axios from 'axios';
export default function () {
    let sum = ref(0);
    function add() {
        sum.value += 1;
    }
    return {sum,add}
}

• 基本页面内容

<template>
    <h2>当前求和为{{ sum }}</h2>
    <button @click="add()">sum</button>
    <button @click="getDog()">再来一只小狗</button>
    <img v-for="dog in dogList" :src="dog" alt="" srcset="" /><br />
</template>
<script lang="ts" setup name="Hello321">
import useDogs from '@/hooks/useDogs';
import useSum from '@/hooks/useSum';
const { dogList, getDog } = useDogs();
const { sum, add } = useSum();
</script>