Vue 구성 요소에서 비동기 결과를 기다리는 올바른 방법

Vue 구성 요소에서 비동기 결과를 기다리는 올바른 방법

약속 결과를 기다리며 라이프 사이클을 어디에 두어야 할지 궁금합니다.실행 가능한 샘플은 다음과 같습니다.https://codesandbox.io/s/focused-surf-migyw작성하다Promise에created()결과를 기다리다async mounted()이것이 Vue 컴포넌트 라이프 사이클의 올바른 최적의 사용입니까?

추신: 이 메서드는 여러 번 호출할 수 있기 때문에 결과를 스토어에 변환으로 저장하고 싶지 않습니다.그래서 반품합니다.PromiseREST 엔드포인트에서 사용자 세부 정보를 다운로드합니다.

store.displaces를 설정합니다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  actions: {
    FETCH_PROFILE: async context => {
      const profile = { name: "Leos" };
      return new Promise(function(resolve, reject) {
        window.setTimeout(function() {
          resolve(profile);
        }, 2000);
      });
    }
  }
});

요소.표시하다

<template>
  <div class="hello">
    <p>Name = {{this.userProfile.name}}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    userProfile: null,
    profilePromise: null
  }),
  created() {
    this.profilePromise = this.$store.dispatch("FETCH_PROFILE");
    console.log(`my profile: ${this.userProfile}`);
  },
  async mounted() {
    const response = await this.profilePromise;
    console.log(response);
    this.userProfile = response;
  }
};
</script>

이 두 가지를 모두 사용해야 하는 특별한 이유가 없다면created그리고.mounted이 모든 것을 로 하는 것이 더 타당할 것입니다.created비동기 호출은 차단되지 않으므로 마운트가 지연될 염려가 없습니다.사용하다created보다는mounted일반적으로 DOM 조작 또는 DOM 기밀 조작용입니다.

async created() {
  const response = await this.$store.dispatch("FETCH_PROFILE");
  this.userProfile = response;
}

언급URL : https://stackoverflow.com/questions/60138660/correct-way-of-waiting-for-async-result-in-vue-component