V3加ts上的vue-hooks-puls封装

在Vue 3中使用Composition API时，可以通过第三方库vue-hooks-puls来简化组件的逻辑。以下是一个简单的例子，展示如何使用vue-hooks-puls库中的useFetch钩子来包装axios请求。

首先，确保安装了vue-hooks-puls：

npm install vue-hooks-puls

然后，在你的Vue组件中使用useFetch：

<template>
  <div>
    <div v-if="isFetching">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else>
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import { useFetch } from 'vue-hooks-puls';
import axios from 'axios';
 
export default {
  setup() {
    const { data, isFetching, error, refresh } = useFetch(
      () => axios.get('https://api.example.com/data'),
      []
    );
 
    // 可以在这里添加更多的逻辑，比如处理用户的操作来刷新数据
    function fetchData() {
      refresh();
    }
 
    return { data, isFetching, error, fetchData };
  }
};
</script>

在这个例子中，useFetch 被用来自动处理数据获取的逻辑，包括加载状态(isFetching)、错误处理(error)和数据获取(data)。refresh 函数可以被用来手动触发数据的重新获取。这样，你可以专注于组件的展示逻辑，而不用写重复的加载、错误处理的代码。