С каким хуком жизненного цикла лучше всего отправлять запрос на извлечение API?

Question

Мне просто интересно, существует ли в настоящее время в сообществе Vue. js консенсус относительно того, какой хук жизненного цикла использовать для отправки действия извлечения API?

Например, у меня есть действие, такое как в моем Vuex магазине:

  ...
  actions: {
    fetchAccount: async ({ commit }, payload) => {
      await Vue.prototype.$API.fetchAccount(payload).then((response) => {
        commit("SET_ACTIVE_ACCOUNT", response.data);
      });
    },
  }
  ...

Действие передается службе:

import { axios } from "@/services/http";
import { EventEmitter } from "events";

class accountServiceAPI extends EventEmitter {
  constructor() {
    super();
    this.accessToken = "";
  }

  fetchAccount(payload) {
    return new Promise({resolve, reject} => {
      axiosWave.get(`api//v2/accounts/retrieve/${payload.accountUUID}`, { headers: {} }).then(response => {
        if (response.success) {
          resolve(response.data);
        } else {
          reject(response.data);
        }
      }).catch(error => {
        reject(error.response);
      });
    });
  }
}

const accountServiceAPI = new accountServiceAPI();

accountServiceAPI.setMaxListeners(5);

export default accountServiceAPI;

Обычно я отправляю это в жизненном цикле created() зацепка за компонент, для которого должны быть данные ... но наверняка должен быть более производительный способ?

Answer 1

Вы можете извлечь из API и манипулировать вашими данными / состоянием уже в created(). mounted() вызывается, когда экземпляр уже, хорошо, смонтирован или визуализирован. Обычно вы будете выполнять настройку, связанную с пользовательским интерфейсом, здесь.

Также вы можете улучшить действие fetchAccount следующим образом:

fetchAccount: async ({ commit }, payload) => {
  const { data } = await Vue.prototype.$API.fetchAccount(payload);
  commit("SET_ACTIVE_ACCOUNT", data);
}