API 가져오기 요청을 디스패치하는 데 가장 적합한 라이프 사이클 훅은 무엇입니까?

API 가져오기 요청을 디스패치하는 데 가장 적합한 라이프 사이클 훅은 무엇입니까?

현재 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()데이터가 필요한 구성 요소의 수명 주기 후크...좀 더 퍼포먼스 있는 방법이 있을까요?

API에서 가져와 빠르면 데이터/상태를 조작할 수 있습니다.created().mounted()인스턴스가 이미 마운트 또는 렌더링된 경우 호출됩니다.일반적으로 여기서 UI 관련 설정을 수행합니다.

또, 이 기능을 향상할 수 있습니다.fetchAccount다음과 같은 동작:

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

언급URL : https://stackoverflow.com/questions/60454296/which-life-cycle-hook-is-best-practise-to-dispatch-an-api-fetch-request-with