VueJS项目的架构考虑因素:实施Vuex

时间:2017-06-05 19:39:52

标签: vue.js frontend vuex

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

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

我们决定使用VueJS和Webpack样板(通过Vue-Cli)构建上述内容,并尝试设计具有通用组件:

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

一些要求

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

问题

  • 使用Vuex管理所有组件和相关交互的状态是否有意义?
  • 听起来应用程序是Vuex的一个很好的用例吗?
  • 如果是这样,为什么?它是否比通过内置的Vue机制(对于父子,兄弟 - 兄弟组件)使用组件到组件通信更好?

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

2 个答案:

答案 0 :(得分:2)

当您有多个需要相同状态的组件时,Vuex非常有用。在您的情况下,您可以在许多不同的地方和格式中显示报告。在我看来,这是Vuex的一个很好的用例。

现在,我不知道你的团队是否熟悉Vue,但通过道具传递数据是 PITA 尤其是,如果需要数据的组件在组件层次结构中远远地扩散,并且通常是深层嵌套的。任何通过道具并向多个级别发出事件的人都会告诉你。

使用Vuex,它是一个单一的函数调用来从组件层次结构中的任何地方获取数据。这是一股清新的空气。

答案 1 :(得分:1)

我投票决定关闭这个问题,因为答案是高度自以为是。

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

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

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

因人而异。