在vuex中异步请求数据,页面获取vuex中的数据渲染页面时,数据还未返回时,页面还未渲染。
解决方法:
在数据还未返回时,先不渲染页面结构,使用骨架屏等待数据请求
<el-skeleton v-if="isShow" :rows="5" animated />
<el-container v-else><el-container/>
等待数据返回之后,设置isShow为true,同时重新渲染页面
setup() {
// 引入vuex
const store = useStore()
// 数据是否加载完成
let isShow = ref(false)
// 初始化页面
async function initHomePage() {
await store.dispatch('first/get_dayBrowse')
await store.dispatch('first/get_allBrowse')
console.log('初始化');
isShow = true
}
onMounted(()=> {
initHomePage()
})
return {
isShow
}
}
完美解决Vue3数据异步获取为完成,页面提前渲染问题!!!
本文转载自: https://blog.csdn.net/weixin_67560997/article/details/129342631
版权归原作者 梓晨63 所有, 如有侵权,请联系我们删除。
版权归原作者 梓晨63 所有, 如有侵权,请联系我们删除。