我们的前端团队目前正在开发具有以下功能的报告应用程序:
- 仪表板
- 投资组合分析工具(返回基于网格的结果的搜索表单)
- 自动报告页面
我们决定使用 VueJS 和 Webpack 样板(通过 Vue-Cli)来构建上述内容，并尝试设计具有通用组件:
- 报告组件
- 有标题、描述、类型(网格、可视化等)和一些设置参数
- 报告列表组件
- 有一个标题和一组报告组件作为其属性
- 一个仪表板，其中包含以网格形式排列的一系列报告列表组件
一些要求
仪表板组件可以有 4 个或更多报告列表组件，每个组件都有多个报告，用户可以从报告列表选择菜单中选择这些报告以供查看。每个报表组件可以有一个或多个设置参数，用户可以操纵这些参数并提交以重新呈现报表。报告可以是网格(在我们的例子中是 ag-grid)或基于可视化的报告。最后，还有通过 Auth0 的身份验证。
问题
- 使用 Vuex 来管理我们所有组件和相关交互的状态是否有意义？
- 听起来该应用程序是 Vuex 的良好用例吗？
- 如果是，为什么？它比通过内置的 Vue 机制(对于父子、 sibling 组件)使用组件到组件通信更好吗？
提前感谢您帮助我们做出决定。
最佳答案
当您有多个需要相同状态的组件时，Vuex 很有用。在您的情况下，您在许多不同的地方和格式中显示报告。在我看来，这是 Vuex 的一个很好的用例。
现在，我不知道您的团队是否熟悉 Vue，但是通过 props 传递数据是一个PITA。 特别是如果需要数据的组件在组件层次结构中分布得很远，并且嵌套很深，通常情况下是这样。任何经历过传递 Prop 和在多个级别发射事件的挑战的人都会告诉你这一点。
使用 Vuex，只需调用一个函数即可从组件层次结构中的任何位置获取数据。这是一股清新的空气。
关于vue.js - Vue JS 项目的架构注意事项 : Implementing Vuex，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44376461/