优化壁纸分类组件数据获取逻辑

This commit is contained in:
wangqiao
2025-09-02 18:28:24 +08:00
parent fa971cff5b
commit e0507f3bd1

View File

@ -84,7 +84,7 @@
}) })
/** 版本 */ /** 版本 */
const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => { const { data: editionsList } = useAsyncData(`editionsList-${props.type}}`, async () => {
const res = await parent({ type: 2, parentId: 0 }) const res = await parent({ type: 2, parentId: 0 })
const all = [{ id: '-1', name: '全部' }] const all = [{ id: '-1', name: '全部' }]
return [...all, ...res.data] return [...all, ...res.data]
@ -92,7 +92,7 @@
// 获取面包屑 // 获取面包屑
const { data: breadList } = await useAsyncData( const { data: breadList } = await useAsyncData(
`breadList-${props.type}-${props.id}-${query.value.projectType}-${Date.now()}`, `breadList-${props.type}-${props.id}-${query.value.projectType}}`,
async () => { async () => {
const res = await getDictTree({ type: 1, id: query.value.projectType }) const res = await getDictTree({ type: 1, id: query.value.projectType })
const all = [ const all = [
@ -104,13 +104,8 @@
] ]
const arr = [...res.data, ...all] const arr = [...res.data, ...all]
return arr.reverse() return arr.reverse()
},
{
immediate: true,
} }
) )
console.log('breadList', breadList);
// const projectTypeList = ref<any>([]) // const projectTypeList = ref<any>([])
/** 获取分类下拉框 */ /** 获取分类下拉框 */
@ -140,7 +135,7 @@
// } // }
// getEditionsList() // getEditionsList()
console.log('breadList.value.length----', breadList.value?.length); console.log('breadList.value.length----', breadList.value);
// 服务端渲染兼容方案:顺序执行异步操作 // 服务端渲染兼容方案:顺序执行异步操作
// 1. 先获取面包屑数据已在上面通过useAsyncData获取 // 1. 先获取面包屑数据已在上面通过useAsyncData获取
@ -160,6 +155,9 @@
parentId = breadList?.value[length - 1].id parentId = breadList?.value[length - 1].id
} }
} }
console.log('parentId', parentId);
try { try {
// 获取分类数据 // 获取分类数据
@ -174,7 +172,7 @@
// 使用useAsyncData获取分类列表确保服务端渲染兼容性 // 使用useAsyncData获取分类列表确保服务端渲染兼容性
const { data: projectTypeList } = await useAsyncData( const { data: projectTypeList } = await useAsyncData(
`projectType-draw-${props.type}-${query.value.projectType}-${Date.now()}`, `projectType-draw-${props.type}-${query.value.projectType}}`,
getProjectTypeList, getProjectTypeList,
{ server: true } // 确保在服务端执行 { server: true } // 确保在服务端执行
) )