多处异步数据的 Vuex 模块

Vuex modules for Async data in multiple places

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

假设我有一个简单的在线商店构建组件：

  1. 产品列表。
  2. 产品过滤。

没有 Vuex：

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

使用 Vuex：

使用模块产品制作 Vuex 商店。在它里面所有从 API 获取产品并过滤它的逻辑。 现在组件 List 和 Filtering 可以分开了。在它们内部使用 getters/actions from store with Products 模块。 它会很好地工作。

我理解的对吗？

但是有问题：

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

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

这取决于实施。

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

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

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