0


Vue3解决Vuex异步获取数据,页面先渲染问题

在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 所有, 如有侵权,请联系我们删除。

“Vue3解决Vuex异步获取数据,页面先渲染问题”的评论:

还没有评论