Vuex

Question

我是 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);
},

Answer 1

动作当然不应该像那样相互链接，除非一个动作特别依赖于前一个动作的结果。

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

Vuex - 加载许多表 - 链接一堆等待分派提取？

Vuex - loading many tables - chain a bunch of await dispatch fetches?

asynchronous

fetch

vue.js