多个地方的异步数据的 Vuex 模块答案

【问题标题】：Vuex modules for Async data in multiple places多个地方的异步数据的 Vuex 模块
【发布时间】：2021-02-03 21:06:06
【问题描述】：

我很难理解如何正确使用 Vuex，如果我什至应该在我的情况下使用它。

假设我用组件构建了简单的在线商店：

我可以将过滤作为子组件，将列表作为父组件。在 List 中获取异步数据，然后将其作为 prop（或 v-model）传递给 Filtering。然后它可以通过 $emit 传回过滤后的产品。而且效果很好。

使用 Vuex：

使用模块产品制作 Vuex 商店。里面包含了从 API 获取产品并过滤它的所有逻辑。现在组件列表和过滤可以分开。在它们内部使用来自商店的 getter/actions 和 Products 模块。它会正常工作。

我理解正确吗？

假设我想在其他地方使用 Products API，例如显示几个推荐的产品。没有 Vuex 会很简单。只需制作单独的组件来获取推荐的数据。

但如果我理解正确的话，使用 Vuex 的主要目的是在全球范围内共享数据。那么我怎样才能从同一个 Vuex 模块中获得两个单独的列表呢？因此，当用户在过滤器中选择某些内容时，它应该只过滤主列表，而不是推荐产品。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

这取决于实现。

例如，如果您使用 API 来提取所有数据，然后在客户端过滤，那么使用 vuex 是有意义的，因为您的组件会更新过滤器并获取结果。在下图中，load products 是一个异步调用，它会加载所有数据，然后应用程序会针对组件进行相关过滤，并可能使其对其他组件可用。

如果您在每次过滤器更改时都进行调用，并且不需要在组件之间持久化或共享数据，那么使用它可能没有什么好处。

请注意，vuex 是一种有助于管理全局状态的工具，您可以自行决定应用中的数据是否可以从使用它中受益。

【讨论】：