javascript - 向 JSON 文件 URL 发出 GET 请求并存储响应，以便可以在 Vue.js 应用程序启动时全局使用它？

Question

想象一下以下场景 - 我有一个 Vue.js 组件，我试图显示用户的名称，但是，我只有该用户的 ID。我还有一个 JSON 文件 URL，其中包含所有用户对象，每个对象都包含用户的名称和 ID。这样我就可以根据用户的 ID 找到用户的姓名。

目前，我在安装 Vue.js 组件时对该 JSON 文件发出 GET 请求，并在 GET 请求通过时存储响应。之后，我可以使用根据用户 ID 返回用户名的函数。

现在我用这种方法遇到的问题是:

• 每次重新加载组件时，我都会向 JSON 文件 URL 发出 GET 请求
• 我只能访问此组件内 GET 请求的响应。我还需要从不同的组件访问相同的 JSON，现在我必须从不同的组件向同一个 JSON 文件发出 GET 请求，这对我来说似乎不正确

我认为将 JSON 响应存储在 VUEX 中是一个好主意，因为我可以从任何地方访问它，但是，在这种情况下，我不确定应该从哪里向 JSON 文件发出 GET 请求.

Vue.js 中是否有一个地方可以放置 GET 请求，以便每次启动 Vue.js 应用程序时都会执行该请求，但最多只能执行一次？

Answer 1

你是对的 - Vuex 是解决这个问题的方法。

假设您正在使用 vue-cli 项目，您可以在其中之一发出初始请求

1. main.js
2. App.vue(顶级组件，在创建的 Hook 内)

两者都可以，只需确保在调用后将用户信息提交到 Vuex 即可。

我建议使用 App.vue，因为您可以在加载用户数据时设置一个微调器/加载图标，以显示用户应用程序正在“执行某些操作”(如果加载时间较长)。