7tp29JDfB88rpw51
237 天前
你可以考虑在你的分页组件中引入一个状态来表示 A 是否已经加载完成。这样，在组件加载时，你可以首先检查是否已经加载了 A 的数据。如果没有，那么首先加载 A ，然后再加载 B 。
下面是一个简单的示例代码，说明了这个思路：
import { ref, watch, onMounted } from 'vue';
export default {
setup() {
// 用于存储 A 的数据
const dataA = ref(null);
// 用于表示 A 是否已经加载完成
const isDataALoaded = ref(false);
// 模拟加载 A 的数据
function fetchDataA() {
// 这里假设 fetchDataA 是异步操作
setTimeout(() => {
// 模拟从 API 获取到的 A 的数据
const result = /* 调用 A 的 API */;
// 存储 A 的数据
dataA.value = result;
// 标记 A 已加载完成
isDataALoaded.value = true;
}, 1000); // 假设加载 A 的数据需要 1 秒钟
}
// 模拟加载 B 的数据
function fetchDataB(page, pageSize) {
// 这里假设 fetchDataB 是异步操作
setTimeout(() => {
// 只有在 A 的数据加载完成后才调用 B 的 API
if (isDataALoaded.value) {
// 这里可以使用 A 的数据来组装 B 的数据
const result = /* 调用 B 的 API ，依赖于 A 的数据 */;
console.log(result);
} else {
// 如果 A 的数据尚未加载完成，则等待 A 加载完成后再调用 B 的 API
console.log("Waiting for A to load...");
}
}, 500); // 假设加载 B 的数据需要 0.5 秒钟
}
// 监听页码和页大小的变化，当它们变化时调用 fetchDataB
watch([currentPage, pageSize], ([newPage, newPageSize], [oldPage, oldPageSize]) => {
fetchDataB(newPage, newPageSize);
});
// 在组件加载时，如果 A 的数据尚未加载，则先加载 A 的数据
onMounted(() => {
if (!isDataALoaded.value) {
fetchDataA();
}
});
return {
dataA,
isDataALoaded,
};
},
};
这样，无论在分页组件加载时还是在页码或页大小变化时，都会先检查 A 的数据是否已经加载完成，然后再决定是否加载 B 的数据。