Vuex는 많은 테이블을 로드하고 많은 대기 디스패치 페치를 연결합니까?

Vuex는 많은 테이블을 로드하고 많은 대기 디스패치 페치를 연결합니까?

저는 Vue에 익숙하지 않아서 많은 테이블을 비동기식으로 로드하는 방법을 해킹합니다.

좀 더 간결하고 효율적인 작곡 방법이 있을까요?

initializeApp({ state, commit, dispatch }) {
  commit("initializeStore"); // sets userData from localStorage || ""
  if (state.userData.token) {
    dispatch("getTables");
  }
},
async getTables({ dispatch, commit }) {
  await dispatch("getCollections");
  const payload = await airtableQuery.getTableAsync("Merchants");
  commit("setMerchants", payload);
},
async getCollections({ dispatch, commit }) {
  await dispatch("getCategories");
  const payload = await airtableQuery.getTableAsync("Collections");
  commit("setCollections", payload);
},
async getCategories({ dispatch, commit }) {
  await dispatch("getSubLocations");
  const payload = await airtableQuery.getTableAsync("Categories");
  commit("setCategories", payload);
},
async getSubLocations({ dispatch, commit }) {
  await dispatch("getLocations");
  const payload = await airtableQuery.getTableAsync("SubLocations");
  commit("setSubLocations", payload);
},
async getLocations({ dispatch, commit }) {
  await dispatch("getQualities");
  const payload = await airtableQuery.getTableAsync("Locations");
  commit("setLocations", payload);
},
async getQualities({ dispatch, commit }) {
  await dispatch("getUserRoles");
  const payload = await airtableQuery.getTableAsync("Qualities");
  commit("setQualities", payload);
},
async getUserRoles({ dispatch, commit}) {
  await dispatch("getPreviousRoomScans");
  const payload = await airtableQuery.getTableAsync("User Roles");
  commit("setUserRoles", payload);
},
async getPreviousRoomScans({ commit }) {
  const payload = await airtableQuery.getTableAsync("Room Scans");
  commit("setPreviousRoomScans", payload);
},

행동이 이전의 행동의 결과에 따라 달라지지 않는 한, 행동은 분명히 서로 그렇게 얽매여서는 안 된다.

initializeApp는, 디스패치 하는 액션을 기다리지 않기 때문에, 발신자에 의해서 올바르게 체인 되지 않습니다.

초기화 시 디스패치해야 하는 독립 액션의 경우 일반적인 레시피는 다음과 같습니다.

initializeApp({ state, commit, dispatch }) {
  commit("initializeStore");
  if (state.userData.token) {
    await Promise.all([
      dispatch("getTables"),
      ...
    ]);
  }
},
async getTables({ commit }) {
  const payload = await airtableQuery.getTableAsync("Merchants");
  commit("setMerchants", payload);
},
...

언급URL : https://stackoverflow.com/questions/67657595/vuex-loading-many-tables-chain-a-bunch-of-await-dispatch-fetches