Vuejs - 在同一个组件中获取不同的日期

Posted 2021-04-30

我创建了几个组件（表，选择等），并且都使用相同的方法来获取API信息。

目的是在应用程序的不同页面上使用这些组件，因此，无论收到什么信息，都可以使用相同的组件（例如表），我已经创建了许多方法来实现这一点。

但是，要将这些方法应用于请求API的所有组件，您必须重复大量代码，因此目标是全局创建这些方法。

在搜索之后，我找到了三种方法，使用Plugins，Mixins和Vuex。但是我不知道最理想的方法是什么。

有什么建议吗？

答案

和Vuex一起去。

使用getters，actions和mutations创建集中存储，其中组件与其数据交互，并且商店知道如何与API交互。

例如，你的table组件可能是愚蠢的，只是期望:data=someData初始化table的组件传递给它，然后它只是渲染任何传递。此someData可以映射到父组件中的Vuex getter（或直接映射到商店状态中的项目）。

当您的组件需要将某些内容提交给API时，它可以触发父项将选择的事件并在商店中调用相应的action或mutation，商店将知道在API中调用什么来执行此操作。所以，即使你的父母也不完全了解API是如何工作的，只是你的抽象if，由你的Vuex商店代表。

我上周在另一个问题上创建了一个非常simple todos application，随便看看，使用Vue，Vuex并将数据保存到Firebase。它也没有尽可能地实现REST，但是改变商店使用正确的REST方法get，post，put，delete等并不是很难。

这个应用程序的所有相关代码都在App.vue和store.js中，在main.js中有一行只是为了将存储添加到Vue实例。

另一答案

Vuex将帮助共享/自己的组件状态。如果您的问题是如何管理共享API调用，Vuex persi将不会直接解决该问题。一旦您获得组件可访问的数据，它将为您提供帮助。

也就是说，您可以创建一个模块来执行API调用并检索数据，例如：

http.js

export const getUser = async id => {      
  const response = await fetch(`/user/${id}`)
  return await response.json()
}

export const getContent = async id => {      
  const response = await fetch(`/content/${id}`)
  return await response.json()
}

这个解决方案可以帮助您使用或不使用Vuex，现在您可以从任何地方调用这些方法。