// 接口数据的获取 import { ref, watch, computed } from 'vue'; export function useFetchData() { // 分页信息 const page = ref(1); const pageNum = ref(1); const pageSize = ref(20); const total = ref(0); watch(page, (nValue, oValue) => { if (nValue != oValue) { fetchData(); } }); watch(pageSize, (nValue, oValue) => { if (nValue != oValue) { fetchData(); } }); // 加载状态, 0: 加载完成; 1: 加载中; 2: 已全部加载; 3: 加载失败; const loadStatus = ref(0); const loading = computed(() => { return loadStatus.value == 1; }); // 数据获取 function fetchData(fetch) { loadStatus.value = 1; fetch(page.value, pageSize.value) .then((pageInfo) => { if (pageInfo) { page.value = pageInfo.page ? pageInfo.page : 1; pageNum.value = pageInfo.pageNum ? pageInfo.pageNum : 1; total.value = pageInfo.total ? pageInfo.total : 0; } loadStatus.value = 0; }) .catch(() => { loadStatus.value = 3; }) .finally(() => { loadStatus.value = 2; }); } return { page, pageNum, pageSize, total, loadStatus, loading, fetchData }; }