vue.js 2.0怎樣實(shí)現(xiàn)父組件方法先于子組件方法之前執(zhí)行

使用vue-cli創(chuàng)建的項(xiàng)目，父組件App.vue里加載了子組件index.vue，父組件與子組件的methods里各自有個(gè)方法。預(yù)設(shè)的想法是想在父組件App.vue的方法里把a(bǔ)jax請(qǐng)求到的數(shù)據(jù)設(shè)置成緩存，然后子組件index.vue的方法去使用緩存的數(shù)據(jù)。但調(diào)試結(jié)果發(fā)現(xiàn)，無(wú)論父組件App.vue里的方法放在函數(shù)生命周期里的哪個(gè)鉤子里，執(zhí)行的順序總是慢于子組件index.vue的方法，導(dǎo)致子組件里調(diào)用的緩存數(shù)據(jù)是undefined，結(jié)果報(bào)錯(cuò)。詳情如下圖

父組件代碼如下：

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
import bus from '../static/js/bus.js'
export default {
    name: 'app',
    data () {
        return {
        
        }
    },
    methods: {
        checkLoingStatus () {
            //首次進(jìn)入頁(yè)面初始化默認(rèn)未登錄并跳轉(zhuǎn)到登錄頁(yè)面
            if (!this.currentLoginStatus && !this.loginStatus) {
                App.setStorage('loginStatus', {'loginStatus': false}, 'localStorage')
                window.location.href = "#/signIn"
            }
        },
        getData () {
            $.ajax({
                url: '../../static/data/data.json',
                type: 'get',
                success: (response) => {
                    console.log('=== ' + response.message + ' ===')
                    console.log('=== 緩存基礎(chǔ)配置數(shù)據(jù)成功 ===');
                    //此處設(shè)置基礎(chǔ)數(shù)據(jù)緩存response.data
                    App.setStorage('response', {'data': response.data}, 'localStorage')
                },
                error: (response) => {
                    //...
                }
            })
        }
    },
    beforeCreate:function(){//組件實(shí)例化之前
        console.log('1===beforeCreate===')
    },
    created:function(){//組件實(shí)例化了
        console.log('2===created===')
    },
    beforeMount:function(){//組件寫(xiě)入dom結(jié)構(gòu)之前
        console.log('3===beforeMount===')
    },
    mounted:function(){//組件寫(xiě)入dom結(jié)構(gòu)了
        console.log('4===mounted===')
        //基礎(chǔ)配置數(shù)據(jù)
        this.getData()
    },
    beforeUpdate:function(){//組件更新前
        console.log('5===beforeUpdate===')
    },
    updated:function(){//組件更新比如修改了文案
        console.log('6===updated===')
    },
    beforeDestroy:function(){//組件銷(xiāo)毀之前
        console.log('7===beforeDestroy===')
    },
    destroyed:function(){//組件已經(jīng)銷(xiāo)毀
        console.log('8===destroyed===')
    }
}
</script>

子組件代碼如下：

<template>
    <div class="page">
        <!-- 省略 -->
    </div>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
        }
    },
    components: {
    },
    methods: {
        getStorageResponseData () {
            //獲取緩存的基礎(chǔ)配置數(shù)據(jù)
            console.log('=== 開(kāi)始使用緩存里的基礎(chǔ)配置數(shù)據(jù) ===')
            this.responseData = App.getStorage('response').data
        }
    },
    mounted () {
        this.$nextTick(() => {
            //由于getStorageResponseData比父組件的設(shè)置緩存方法先執(zhí)行
            //結(jié)果獲取不到緩存數(shù)據(jù)，報(bào)undefined
            this.getStorageResponseData()
        })
    }
}
</script>