Vue 인스턴스의 beforeCreate 후크에서 비동기 호출을 만드는 방법은 무엇입니까?

Question

인증을 사용하여 Vuejs 앱을 구축 중입니다.

페이지가로드되고 app Vuejs 인스턴스를 초기화 할 때 beforeCreate 후크를 사용하여 사용자 개체를 설정합니다. localStorage에서 JWT를로드하고 검증을 위해 백엔드로 보냅니다.

이 호출은 비동기 호출이며이 app 객체 (탐색 막대,보기 등)의 구성 요소는 호출 결과가 확인 결과를 반환하기 전에 빈 사용자 데이터로 초기화됩니다.

약속 개체가 해결 될 때까지 하위 구성 요소의 초기화를 지연하는 가장 좋은 방법은 무엇입니까? 여기

내가 내 뷰 응용 프로그램 객체에있는 것입니다 :

beforeCreate: function(){ 
    // If token or name is not set, unset user client 
    var userToken = localStorage.userToken; 
    var userName = localStorage.userName; 
    if (userToken == undefined || userName == undefined) { 
     StoreInstance.commit('unsetUserClient'); 
     // I WANT TO RESOLVE HERE 
     return; 
    } 

    // If token and name is set, verify token 
    // This one makes an HTTP request 
    StoreInstance.dispatch({type: 'verifyToken', token: userToken}).then((response) => { 
     // I WANT TO RESOLVE HERE 
    }, (fail) => { 
     // I WANT TO RESOLVE HERE 
    }) 
    } 

Answer 1

현재의 라이프 사이클 콜백은 어떤 약속/비동기 동작이없는 기능입니다. 안타깝게도 데이터를로드하는 동안 앱을 일시 중지하는 방법이없는 것처럼 보입니다. 대신에 beforeCreate 함수에서로드를 시작하고 플래그를 설정하고 빈 데이터가있는 로딩 화면/스켈레톤을 표시하고 데이터가로드 될 때 플래그를 반전 한 다음 해당 구성 요소를 렌더링 할 수 있습니다.