使用 Vuex 对多个请求进行分组

Question

目前我们有 Vue + Vuex 应用程序，每个页面使用大量自定义组件。我们使用 MongoDB 作为数据库。

每个组件从 API 端点加载一些初始化数据：

async loadData() {
  const data = await getData('/api/some_url', {path_in_db: 'some.path.to.db')
}

现在我们遇到了一个问题，即在页面初始化期间有超过 50 个请求发送到后端服务器。

我尝试做的事情：

创建 Vuex 商店

import { INITIAL_DATA_GET, INITIAL_DATA_SET, INITIAL_DATA_CLEAR } from './actions';

const getDefaultState = () => {
  return {};
};

const mutations = {
  [INITIAL_DATA_SET]: (mutationState, obj) => {
    const { request = {} } = mutationState;
    if (!request[obj.ref]) {
      request[obj.ref] = { paths: [] };
    }
    request[obj.ref].paths.push(obj.resPath);
    Vue.set(mutationState, 'request', request);
  },
  [INITIAL_DATA_CLEAR]: (mutationState) => {
    Vue.set(mutationState, getDefaultState());
  },
};

const actions = {
  [INITIAL_DATA_SET]: ({ commit }, obj) => {
    commit(INITIAL_DATA_SET, obj);
  },
  [INITIAL_DATA_CLEAR]: ({ commit }) => {
    commit(INITIAL_DATA_CLEAR);
  },
};

const getters = {
  [INITIAL_DATA_GET]: getterState => getterState,
};

从我运行的每个组件

store.dispatch(INITIAL_DATA_SET, {
  ref: this.ref,
  resPath: this.resPath,
});

所有组件初始化后，最后一个console.log(mutationState)看起来像这样

getters: {
  request: {
    5d879e7af0a317002e5b4759: {
       paths: ['path.to.a', 'path.to.b', 'path.to.c'...]
    }
  }
}

我的问题是：

• 有什么方法可以等待所有组件加载完毕，然后才向数据库发送一个请求？
• 实现此类（获取多个请求）的最佳做法是什么？
• 最佳方案是什么：发送一个大请求还是多个小请求？

Answer 1

在处理异步操作后等待多个子组件完全加载时，您可能希望使用$emit 设置组件准备就绪的标志。一旦你的父母检测到所有孩子都准备好了，你就可以触发任何你想要的东西。这通常在使用骨架组件和微调器时使用。

根据您的需要，可以通过不同的方式发出多个异步请求。如果您只想快速轻松地处理，请将它们全部分组到 Promise.all 数组中，然后一次性完成。如果顺序很重要，那么您可以根据需要在 Promises 中将它们一起批处理。

没有真正的“最佳”方案。如果您有带宽并使用良好的 UI/UX 实践，您可以单独或批量发送它们。如果您的顶级组件组件花费的时间更少，请先调用这些组件，然后再调用较低的组件，以便用户更快地进行交互。有很多方法可以做到这一点。

但是，如果您在初始化时对后端服务器进行了 50 次调用，那么您的服务器设置是否正确？端点是否有效？你能从正面做的只有这么多。