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

Posted 2023-02-23

【中文标题】Vuejs - 在同一个组件中获取不同的日期

【英文标题】：Vuejs - Get different date in the same component

【发布时间】：2018-11-27 03:48:31

【问题描述】：

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

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

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

经过搜索，我发现了三种方法，分别是 Plugins、Mixins 和 Vuex。但是我不知道最理想的方法是什么。

有什么建议吗？

【参考方案1】：

使用Vuex。

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

例如，您的table 组件可能是哑，并且只期望初始化table 的组件传递给它的:data=someData，然后它只会渲染传递的任何内容。这个someData可以映射到父组件中的一个Vuex getter（或者直接映射到store状态的一个item）。

当您的组件需要将某些内容提交给 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中的一行只是为了将store添加到Vue实例中。

【讨论】：

感谢您的建议和示例，我会尝试在我的项目中应用：D

应该提到，但你可以克隆项目并运行npm install和npm run serve。

想象一下我在同一个页面调用同一个组件，状态会得到最后一次出现。基本上我所做的就是传递这个组件需要的 props 键，然后我在 vuex 中创建了一个通过键运行的操作，并将获取这些键的值以及我从 API 获得的信息。但是当我在同一页面上调用相同的组件时，由于我更改了状态，此信息将是最后一次出现。在这些情况下我应该采取什么方法？

我认为状态是按键划分的，类型 component1: [data], component2: [data2] 类型，你认为有一个通用的方法是一个很好的做法，我得到某些键，我'将根据它们获取信息或为每个订单创建一个状态？

你能用一个例子更新这个问题吗？更容易阅读代码。

【参考方案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 都可以帮助您的解决方案，现在您可以从任何地方调用这些方法。