修复典籍知识问答典籍管理界面典籍不能正确加载的问题
1.问题描述,在进行增删改后,已有典籍不能正确加载
2.解决思路
在前端的loadBooks方法中添加console.log,输出获取到的数据和参数,发现没有能够正确获取到最新的数据
根据代码分析,问题可能出在分页参数未正确维护导致加载了错误的页码,导致无法成功加载出相应的典籍
3.代码修改:
修改了loadData和初始化加载方法以及其中参数的传递
// 组件内分页状态
const pagination = ref({
page: 1,
size: 10,
category: null,
keyword: null
})
// 带参数加载数据
const loadData = async () => {
try {
isLoading.value = true
await store.loadBooks({
page: pagination.value.page-1,
size: pagination.value.size,
category: pagination.value.category,
keyword: pagination.value.keyword
})
} catch (error) {
console.error('数据加载失败:', error)
alert('数据加载失败,请检查网络连接')
} finally {
isLoading.value = false
}
}
// 初始化加载
onMounted(() => {
pagination.value = {
page: 1,
size: 10,
category: null,
keyword: null
}
loadData()
})
4.解决效果
增删改以及界面初始化能够正确展示如下图所示的典籍列表