생성된 vuejs 구성 요소가 먼저 데이터가 로드되기를 기다립니다.

생성된 vuejs 구성 요소가 먼저 데이터가 로드되기를 기다립니다.

나는 가지고 있다.App.vue현재 로그인한 사용자를 로드하는 컴포넌트.또, 로그인 루트를 실행하려고 하고, 현재 로그인하고 있는 유저가 이미 컨텍스트에 보존되어 있는 경우(이미 로그인하고 있는 경우)에는, 유저를 리다이렉트 합니다.

// inside App.vue component
created() {
  AuthService.getCurrentUser().then((user) => {
    this.user = user;
  });
}

수표가 있습니다.createdcurrentUser가 설정되어 있는지 여부를 나타내는 로그인 컴포넌트의 메서드.단, 사용자가 로그인 페이지로 이동하려고 하면 현재 사용자에 대한 요구가 완료되지 않을 수 있습니다.

질문입니다.

App.vue 컴포넌트가 로드되기 전에 데이터가 로드될 때까지 어떻게 기다려야 합니까?난 이런 걸 봤어

waitForData: true,
data(transition) {
  return AuthService.getCurrentUser().then(currentUser => {
    transition.next({ currentUser });
  });
}

데이터가 로드될 때까지 기다리지 않고 컴포넌트가 로드됩니다.

편집: 알고 있습니다.beforeRouteEnter하지만 이게.App.vue루트 고유의 컴포넌트가 아닌 모든 컴포넌트의 부모 컴포넌트입니다.

로드된 데이터에 의존하는 하위 구성 요소를 래핑하는 요소에 v-if를 추가하여 유사한 문제를 해결했습니다.그리고 물론 v-if를 제어하는 데이터 속성도 있습니다.래핑 요소가 없는 경우 언제든지 템플릿 요소를 사용하여 래핑을 수행할 수 있습니다.

이것은 Vue의 작업 방식이 아닙니다.

1. VUEX를 사용하여 currentUser 객체 저장
2. App.vue의 계산 섹션에서 Vuex getters를 설정합니다.데이터가 준비되면 템플릿이 동적으로 업데이트됩니다.

이 페이지의 mapGetters 섹션을 참조하십시오.계산된 메커니즘으로 매우 잘 작동합니다.

VUEX에서 데이터가 준비되기 전에 구성 요소가 생성되지 않도록 관련 구성 요소에서 v-if를 사용할 수도 있습니다.

사용하는 경우vue-router, 를 사용할 수 있습니다.beforeRouteEnterguard를 사용하여 데이터를 비동기적으로 로드합니다.https://router.vuejs.org/en/advanced/data-fetching.html

제가 생각할 수 있는 한 가지 방법은 사용자가 Roa를 사용하여App.vue현재 경로와 현재 경로인지 여부를 확인하기 위한 구성 요소\login리다이렉트 합니다.

다음과 같은 경우:

created() {
  AuthService.getCurrentUser()
  .then(user => this.setCurrentUser(user))
  .then(() => {
    const { path } = this.$router.currentRoute;
    if (path === '/login') {
      this.$router.push('/');
    }
  });

언급URL : https://stackoverflow.com/questions/46890816/vuejs-component-created-wait-for-data-to-load-first