Vue3 solves the problem of Vuex getting data asynchronously and rendering the page first

Data is requested asynchronously in vuex. When the page gets the data in vuex to render the page, when the data has not been returned, the page has not been rendered.

Solution:

When the data has not been returned, the page structure is not rendered first, and the skeleton screen is used to wait for the data request

<el-skeleton v-if="isShow" :rows="5" animated />
<el-container v-else><el-container/>

After waiting for the data to return, set isShow to true and re-render the page at the same time

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
        }
    }

It perfectly solves the problem that the asynchronous acquisition of Vue3 data is not completed, and the page is rendered in advance! ! !