Правильный способ ожидания asyn c результата в Vue компоненте - PullRequest
Новая
       21

Правильный способ ожидания asyn c результата в Vue компоненте

1 голос
/ 09 февраля 2020

Интересно, где поставить жизненный цикл в ожидании результата обещания. Имеется пригодный для запуска образец: https://codesandbox.io/s/focused-surf-migyw. Я создаю Promise в created() и жду результата в async mounted(). Правильно ли это и оптимально ли использовать Vue жизненный цикл компонента?

PS Я не хочу сохранять результат как мутацию в хранилище, потому что я могу вызывать этот метод несколько раз. Поэтому я возвращаю Promise. Он загружает подробности пользователя из конечной точки REST.

store. js

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);
      });
    }
  }
});

component. vue

<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>

1 Ответ

1 голос
/ 09 февраля 2020

Если у вас нет какой-либо необычайно веской причины разбить это на использование created и mounted, было бы более разумно сделать все это в created. Вам не нужно беспокоиться о том, что это отложит монтирование, потому что вызовы asyn c не блокируют. Используйте created вместо mounted, что обычно для манипуляций с DOM или операций, чувствительных к DOM. 

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