Vue JS 项目的架构注意事项：实现 Vuex答案

【问题标题】：Architetural Considerations for VueJS project: Implementing VuexVue JS 项目的架构注意事项：实现 Vuex
【发布时间】：2017-11-06 16:05:59
【问题描述】：

我们的前端团队目前正在开发具有以下功能的报告应用程序：

仪表板
投资组合分析工具（返回基于网格的结果的搜索表单）
自动报告页面

我们决定使用 VueJS 和 Webpack 样板（通过 Vue-Cli）来构建上述内容，并尝试设计具有通用组件：

报告组件
- 有标题、描述、类型（网格、可视化等）和一些设置参数
报告列表组件
- 具有标题和报表组件数组作为其属性
具有以网格排列的报告列表组件数组的仪表板

一些要求

一个仪表板组件可以有 4 个或更多报告列表组件，每个组件都有多个报告，用户可以从报告列表选择菜单中选择这些报告进行查看。每个报表组件都可以有一个或多个设置参数，用户可以操作和提交这些参数以重新呈现报表。报告可以是网格（在我们的例子中为 ag-grid）或基于可视化的报告。最后，还有通过 Auth0 进行的身份验证。

问题

使用 Vuex 来管理我们所有组件和相关交互的状态是否有意义？
听起来该应用程序是 Vuex 的一个很好的用例吗？
如果是这样，为什么？是否比通过 Vue 内置机制（父子、兄弟组件）使用组件间通信更好？

提前感谢您帮助我们做出决定。

【问题讨论】：

标签： vue.js frontend vuex

【解决方案1】：

当您有多个需要相同状态的组件时，Vuex 很有用。在您的情况下，您正在以许多不同的位置和格式显示报告。在我看来，这是 Vuex 的一个很好的用例。

现在，我不知道你的团队是否熟悉 Vue，但通过 props 传递数据是 PITA。 特别是如果需要数据的组件在组件层次结构中分散得很远，并且嵌套很深，它们通常是这样的。任何经历过传递道具和发射多个级别的事件的人都会告诉你。

使用 Vuex，它是从组件层次结构中的任何位置获取数据的单个函数调用。呼吸新鲜空气。

【讨论】：

【解决方案2】：

我投票结束这个问题，因为答案是高度自以为是的。

我使用 Vue 构建了多个项目，其中一些包含数十个组件和数千行代码。我从来没有感觉到复杂程度上升到我需要 Vuex 的程度。

您已经描述了一个包含六个组件的应用程序。

我确实将我的逻辑抽象为自定义对象，但这只是 javascript。

YMMV。

【讨论】：