两个调用相同API函数的vue组件

Question

我在同一个父组件上有一个组件的两个实例，并且这个子组件在创建的生命周期挂钩中进行API调用，以填充下拉列表。这两个子实例的列表数据都将相同。

因此，结果是当加载父组件时，我实际上两次调用了API，这是不必要的。

我的问题是我是否只想调用一次API，还是应该将API调用移至父级并将下拉列表项传递给子级，还是使用vuex并让父级调用一个调用API的操作。然后，该操作会将项目保存为状态，子组件将通过商店获取程序访问项目。

我很想使用vuex存储，因为列表很小，在当前父级之外的其他地方可能会需要它。

Answer 1

TLDR;

• 如果要在Parent->子关系之外使用它，请使用Vuex

• 如果您知道它的大小，可以将它作为道具传递，也可以降低设置商店的复杂性。

• 另一种选择是将其存储在localStorage中，但这可能不如您希望的那样可靠，因为清除其缓存的人将失去下拉菜单的功能。

您可以将其存储在Vuex存储中，以使其能够在应用程序中的任何位置持久化，但是，如果父级正在获取列表，并且只需要将下拉列表传递给子级，则还可以创建一个支持孩子并以这种方式传递下拉列表。

孩子们将有权使用下拉菜单项，您是否不需要为小型应用程序中的简单下拉菜单添加Vuex的复杂性？

您提到列表不是很大，并且如果下拉列表不是用户每次单击或使用时都必须单击的内容，那么将其作为两个API调用不一定是不好的。当他们试图访问下拉列表时，您可以只加载数据，这在某些情况下可以为您和客户节省不必要的请求下拉列表的带宽。

Answer 2

如果需要将相同的数据渲染到多个组件，则应该去Vuex存储。 Vuex存储在初始设置级别增加了代码的复杂性，但是事后，将API数据用于多个组件是如此简单而轻松。这并不意味着在每个应用程序中都使用Vuex存储。如果您正在开发本质上是渐进式的应用程序，并且将来它将变得更加复杂，那么请开始使用Vuex store。它将对您的未来发展有所帮助。这是所有Vuex store的详细信息。