Question

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

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

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

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

有什么建议吗？

Answer 1

使用Vuex。

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

例如，您的table组件可以 dumb ，只需要: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实例。

Answer 2

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，现在您可以从任何地方调用这些方法。

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

2 个答案: