使用 Vue 重用组件和维护状态答案

【问题标题】：Reusing Components and Maintaining State with Vue使用 Vue 重用组件和维护状态
【发布时间】：2020-07-29 16:29:58
【问题描述】：

我创建了一些链接的 Vue 组件，我可以在多个项目之间重用它们。最终我想用 NPM 或 Bit 之类的工具来做，但现在我是手动做的。

我所有的组件都只是使用 props 和 emits 在它们之间传递数据。这变得非常低效，因为我的许多组件并不是一直紧挨着放置，所以我想将它们转移到更强大的解决方案中。现在，我发现自己必须多次发出相同的数据才能恢复链条。

通过阅读我知道可以使用全局事件总线来维护组件之间的状态，或者可以使用 Vuex 来维护我的整体应用程序状态，但是如何将其纳入可重用组件中呢？

在我看来，如果我的组件基于任一选项，那么我承诺始终将该组件与全局事件总线或 Vuex 一起使用。显然，在某些项目中，我可能希望根据应用程序的复杂性在使用其中一种或另一种之间进行切换。

如何最好地解决这个问题？我是否需要根据整个应用程序略有不同的组件（这感觉就像我失去了重用能力）还是我在这里没有考虑到什么？

对于我的一个应用程序，我有以下简化的组件结构：

Root Component
    Grid
        Card
            FilterDropdown
            Graph

目前我将数据从 API 传递到我的根组件，然后在每个阶段通过 props 将其传递到 Graph 组件。

另一方面，我的 FilterDropdown 获取一个数据列的不同列表，并提供一个下拉列表，用户可以在其中选择一个值。然后，这些值会在树的根组件上发出 3 次，用于通过计算属性过滤数据，然后使用相同的 props 再次向下传递。

我是否认为这需要改变而使事情变得过于复杂？我已经可以想象如何通过使用事件总线或 Vuex 来实现同样的事情，同时减少整体混乱，但在我的脑海中，我认为我会失去一些重用能力？

【问题讨论】：

【解决方案1】：

如果应用将道具传递给不相关的组件，或者通过多个后代维护道具/发射链变得乏味，那么现在可能是使用您提到的选项之一的好时机。来自 Vuex 文档：

传递 props 对于深度嵌套的组件来说可能很乏味，而且对于兄弟组件根本不起作用。

如果架构不是那么复杂，则可能无需切换。但如果有……

Vuex 模块

由于 Vuex 允许使用模块，您可能可以消除它是否会对组件的可重用性产生负面影响的问题。您可以将组件 + 它们专用的 Vuex 模块视为一个包。 Vuex 模块可以封装所有必要的商店功能，而不会影响使用它的应用商店的任何部分。

插件

您甚至可以从这些组件创建plugins，并在应用的现有商店中使用dynamic module registration 到register their associated Vuex module。

你可以用插件和事件总线做类似的事情。

您可以将其视为为应用程序提供接口以利用其功能的插件，而不是将其视为限制。您也可以采用“上述所有方法”并为每个选项创建一个解决方案。

【讨论】：