我应该在哪里存储从 GET 请求中检索到的 JSON，以便我可以在 v-for 指令中访问它？

Question

我对使用 API 很陌生，所以如果这真的很琐碎，请原谅我。

我想使用两个 GET 请求：

• /workflow/search 将允许我获取完整的工作流列表及其数据（即工作流 ID）。
• /workflow/{workflowId} 将让我获得更详细的特定工作流程。

我的数据函数中目前有importedWorkflows，其中填充了我从/workflow/search 调用中获得的信息。如果我想了解有关工作流程的更多信息，那么我想致电/workflow/{workflowId}。

但是，这确实很困难，尤其是因为我使用 Jquery 来获取 JSON 数据。

$.getJSON(dataURL, function(data) {
      self.importedWorkflows = data.results;
    });

由于都是异步的，我真的只想在准备就绪时访问/workflow/{workflowId} 找到的信息。

这是我实现这一目标的尝试： 我计算了一个名为importedWorkflowDefinitions 的数组，它遍历了/workflow/search 找到的所有工作流，并为每个工作流调用/workflow/{workflowId}。我将每个调用返回的 JSON 数据存储在计算数组中。然后，我使用一种名为generateWorkflowById() 的方法在importedWorkflowDefinitions 中查找工作流JSON。

不过……

在我的 Vue 应用程序中，我有一个使用 v-for 指令制作的表格。

<tbody v-for="workflow in workflowsOnPage">
     <tr class="expandable-row" :id="workflow.workflowId">
          <td>{{ generateWorkflowById(workflow.workflowId).workflowName }}</td>
          <td>{{ workflow.workflowId }}</td>
          <td>{{ workflow.status }}</td>
          <td class="text-align-right">{{ workflow.startTime }}</td>
          <td class="text-align-right">{{ workflow.endTime }}</td>
          ...

注意：workflowsOnPage 是一个计算出来的 JSON 数组，它除以 importedWorkflows。

所以，本质上发生的事情是，表格将在没有 generateWorkflowById(workflow.workflowId).workflowName 值的情况下呈现，因为第一次调用 /workflow/search 尚未完成。此外，即使 workflowDefinitions 已计算并且在完成 /workflow/search 调用时会发生变化，但表格已经完成渲染，不会再次运行 generateWorkflowById(..) 方法。

有没有办法将通过/workflow/{workflowId} 调用找到的信息呈现到表格上，而我的所有数据都不会发生这种竞争？

顺便说一句，我正在与 Netflix Conductor 合作，因此如果有更好的 API 调用或其他方式来访问与工作流相关的所有详细信息，那么我就不必进行这些依赖 API 调用，请告诉我！

谢谢！

Answer 1

它已经存储在 Elasticsearch 中。从以下位置检查您的弹性搜索信息： http://localhost:8080/api/admin/config

您可以从那里查询数据，比导体 api 快得多，并减轻主要用于执行的 API 的负载。从 ES 中读取还可以让您更轻松、更高效地进行各种转换。

Answer 2

简答：使用 vuex 存储，注册一个将执行 get 请求的操作并创建一个突变，它将请求的响应存储到存储变量中的状态变量，然后使用计算检索存储变量并使用将其添加到您的模板中

Answer 3

这里有几件事......

1. 计算属性用于返回基于反应属性的新值。他们不应该执行任何异步功能
2. 调用方法来渲染模板的某些部分效率非常低，并且可能导致更多问题，例如无限循环
3. 混合使用 Vue 和 jQuery？直接说“不” ?‍♂️

在这里，另一种方法是获取组件的 created 挂钩中的所有数据，并显示 加载 指示仍在组合中的部分

export default {
  data: () => ({
    importedWorkflows: []
  }),
  computed: {
    workflowsOnPage () {
      return .... // whatever you do to importedWorkflows to "divide" them
    }
  },
  async created () {
    const res = await fetch('/workflow/search')
    const workflows = (await res.json()).results

    // assign the new array values once all fetches are resolved
    this.importedWorkflows = await Promise.all(workflows.map(async workflow => {
      const res = await fetch(`/workflow/${workflow.workflowId}`)
      const details = await res.json() // assuming this is correct
      return {
        ...workflow,
        details
      }
    }))
  }
}

<p v-if="workflowsOnPage.length === 0">Loading...</p>

<!-- snip -->

<!-- this won't render until the "workflowsOnPage" array has elements -->
<tbody v-for="workflow in workflowsOnPage">
  <tr class="expandable-row" :id="workflow.workflowId">
    <td>{{ workflow.details.workflowName }}</td>
    <td>{{ workflow.workflowId }}</td>
    <td>{{ workflow.status }}</td>
    <td class="text-align-right">{{ workflow.startTime }}</td>
    <td class="text-align-right">{{ workflow.endTime }}</td>
    <!-- etc -->
  </tr>
</tbody>

请注意，我已将来自/workflow/{workflowId} 的额外详细信息加载到/workflow/search 返回的每个workflow 对象的details 属性中。