我'm working a Vue project, and I' m使用Vuex来管理应用程序状态 . 我将应用程序的视图分成许多小布局，作为Vue组件 . 例如，我有一个 header 和一个浮动 stats 面板的布局 .
我写了一个自定义指令来粘贴 stats 面板 . 目前，这与您设置值的Bootstrap类似，当页面滚动超过该点时， affix CSS类将添加到元素中 . 该值基于 header 的高度 . 由于app是响应式的，我宁愿让这个值从头 outerHeight 属性计算出来 .
现在，我可以想出几种方法来实现这一点，但是我不确定正确的方法 .
-
我可以监听调整大小事件并让 Headers 更新它在Vuex商店中的高度 . 但是，让商店管理演示数据似乎很糟糕 .
-
我可以将 Headers 的
id传递给affix指令，并使用getElementById来检查高度 . 但这完全绕过了Vue . -
我可以向
header添加一个方法来返回它的'高度，并让拥有header和stats面板的父组件使用它来更新词缀值 . 但是，如果header和stats不共享同一个父级，则会变得混乱 .
还有其他选择吗？什么是最佳做法？谢谢！
1 回答
我肯定会选择＃1 - 通过Vuex分享它 . 请记住，Vuex只是一个舞台监督 . 没有规则要存储哪种数据 . 此外，我认为最好使用它，因为更多的组件可能依赖于这种数据，并且它将是唯一的事实来源，它以可预测的方式发生变异 . 所有其他选项包括页面上的耦合组件/实例/元素，因此高度和页面之间的连接越大，这些连接将变得越复杂 .
此外，它将是被动的，所以只需使用动作/突变，您就可以在任何地方更新它，因此您的页面看起来会响应 .