在Vue中管理演示文稿数据（调整事件大小）？

Question

我正在使用Vue项目，我正在使用Vuex来管理应用程序状态。我将应用程序的视图分成许多小布局，作为Vue组件。例如，我有header和浮动stats面板的布局。

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

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

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

还有其他选择吗？什么是最佳做法？谢谢！

Answer 1

我肯定会选择＃1 - 通过Vuex分享它。请记住，Vuex只是一个舞台监督。没有规则要存储哪种数据。此外，我认为最好使用它，因为更多组件可能依赖于此类数据，并且它将是唯一的事实来源，即以可预测的方式进行变异。所有其他选项包括页面上的耦合组件/实例/元素，因此高度和页面之间的连接越大，这些连接的增长就越复杂。

另外它会被动反应，因此只需使用动作/突变，您就可以在任何地方更新它，因此您的页面看起来会响应。