在 Vue 中管理演示数据（调整事件大小）？
Manage Presentation Data in Vue (Resize Events)?
我正在处理一个 Vue 项目，我正在使用 Vuex 来管理应用程序状态。我已经将应用程序的视图分成许多小布局，作为 Vue 组件。例如，我有一个 header 和一个浮动 stats 面板的布局。
我写了一个自定义指令来固定 stats 面板。目前，这类似于 Bootstrap 的工作方式，您可以在其中设置一个值，当页面滚动超过该点时，会将 affix CSS class 添加到元素中。此值基于 header 的高度。由于应用程序是响应式的，我宁愿根据 header outerHeight 属性.
计算此值
现在，我可以想出几种方法来完成这个，但是我不确定 Vue 的正确方法做吧。
- 我可以监听调整大小事件并让 header 更新它在 Vuex 商店中的高度。但是，让商店管理演示数据似乎是一种不好的做法。
- 我可以将 header 的
id 传递给词缀指令，并使用 getElementById 来检查高度。但这是完全绕过了Vue。
- 我可以将一个方法添加到
header 到 return 它的高度，并让 parent 组件包含 header 和 stats 面板使用它来更新词缀值。然而，如果 header 和 stats 不共享相同的 parent. ，这会变得混乱
还有其他选择吗？什么是最佳实践？谢谢！
我肯定会选择 #1 - 通过 Vuex 分享它。请记住，Vuex 只是一个舞台管理器。没有规则要存储哪种数据。此外，我认为最好使用它，因为更多的组件可能依赖于这种数据，而且它将是唯一的真实来源，以可预测的方式发生变异。所有其他选项包括页面上的耦合 components/instances/elements，因此高度和页面之间的联系越大，这些联系就会变得越复杂。
此外，它是响应式的，因此只需使用 actions/mutations，您就可以在任何地方更新它，因此您的页面看起来响应式。
我正在处理一个 Vue 项目，我正在使用 Vuex 来管理应用程序状态。我已经将应用程序的视图分成许多小布局，作为 Vue 组件。例如，我有一个 header 和一个浮动 stats 面板的布局。
我写了一个自定义指令来固定 stats 面板。目前，这类似于 Bootstrap 的工作方式，您可以在其中设置一个值，当页面滚动超过该点时，会将 affix CSS class 添加到元素中。此值基于 header 的高度。由于应用程序是响应式的，我宁愿根据 header outerHeight 属性.
现在，我可以想出几种方法来完成这个，但是我不确定 Vue 的正确方法做吧。
- 我可以监听调整大小事件并让 header 更新它在 Vuex 商店中的高度。但是，让商店管理演示数据似乎是一种不好的做法。
- 我可以将 header 的
id传递给词缀指令，并使用getElementById来检查高度。但这是完全绕过了Vue。 - 我可以将一个方法添加到
header到 return 它的高度，并让 parent 组件包含header和stats面板使用它来更新词缀值。然而，如果header和stats不共享相同的 parent. ，这会变得混乱
还有其他选择吗？什么是最佳实践？谢谢！
我肯定会选择 #1 - 通过 Vuex 分享它。请记住，Vuex 只是一个舞台管理器。没有规则要存储哪种数据。此外，我认为最好使用它，因为更多的组件可能依赖于这种数据，而且它将是唯一的真实来源，以可预测的方式发生变异。所有其他选项包括页面上的耦合 components/instances/elements，因此高度和页面之间的联系越大，这些联系就会变得越复杂。
此外，它是响应式的，因此只需使用 actions/mutations，您就可以在任何地方更新它，因此您的页面看起来响应式。