vue.js - 在 Vue 中管理演示数据(调整事件大小)？

Question

我正在处理一个 Vue 项目，我正在使用 Vuex 来管理应用程序状态。我已经将应用程序的 View 分成许多小布局，作为 Vue 组件。例如，我有一个 header 布局和一个 float stats 面板。

我已经编写了一个自定义指令来附加 stats 面板。目前，这与 Bootstrap 的工作方式类似，您可以在其中设置一个值，当页面滚动超过该点时，一个 affix CSS 类将添加到元素中。该值基于 header 的高度。由于应用程序是响应式的，我宁愿从 header outerHeight 属性计算这个值。

现在，我可以想出几种方法来实现这一点，但我不确定 Vue 的正确方法。

1. 我可以监听调整大小事件并让 header 更新它在 Vuex 存储中的高度。但是，让商店管理演示数据似乎是一种糟糕的做法。
2. 我可以将 header 的 id 传递给 affix 指令，并使用 getElementById 来检查高度。但这是完全绕过了 Vue。
3. 我可以向 header 添加一个方法来返回它的高度，并让父组件包含 header 和 stats面板使用它来更新词缀值。然而，如果 header 和 stats 不共享同一个父级，这会变得困惑。

还有其他选择吗？什么是最佳实践？谢谢!

Answer 1

我肯定会选择 #1 - 通过 Vuex 分享它。请记住，Vuex 只是一个舞台管理器。没有规则要存储哪种数据。此外，我认为最好使用它，因为更多的组件可能依赖于这种数据，而且它将是唯一的真实来源，以可预测的方式发生变异。所有其他选项包括耦合页面上的组件/实例/元素，因此高度和页面之间的联系越大，这些联系就会变得越复杂。

此外，它是响应式的，因此只需使用 Action /突变，您就可以在任何地方更新它，因此您的页面看起来响应式。