초기화를 기다리는 Vuejs 구성 요소

Question

일부 컨텍스트를 제공하기 위해 및 vuex을 사용하는 vuejs 응용 프로그램을 사용했습니다.

• app.vue 부트 스트랩 코드
• foo.vue 노선에 /foo
• bar.vue 응용 프로그램이 시작 내가 장치에서 읽기 상태를 동기화해야하는 경우 경로 /bar

에 렌더링 일부 구성 요소를 렌더링 일부 구성 요소 저장. 이것은 비동기 작업이기 때문에 vue-action에 랩핑되고 app.vue에 호출됩니다.

은 구성 요소가 아직 장치에 저장

에서 업데이트되지 않는 $store 장착 된 시간을 기준으로 /foo 경로를 입력 할 때 어떻게 장착하기 전에 모든 구성 요소가 초기화가되어 보장 할 수 있는가?

Answer 1

이러한 상황에서 나는 루트 <router-view> 요소의 v-if을 사용하여 거기에있을 것으로 예상되는 데이터가 채워진 경우에만 렌더링합니다.

<script> 
    export default { 
    computed: { 
     hasLoadedData() { 
     // Or whatever criteria you decide on to represent that the 
     // app state has finished loading. 
     return this.$store.state.something !== null; 
     } 
    } 
    } 
</script> 

<template> 
    <div id="app"> 
    <router-view v-if="hasLoadedData" /> 
    <p v-else>Loading...</p> 
    </div> 
</template>