Architetural Considerations for VueJS project: Implementing Vuex

Question

Our front-end team is presently working on a Reporting application with the following features:

• Dashboards
• Portfolio Analysis Tool (search form that returns grid-based results)
• Automated Reports page

We've decided to architect the above using VueJS with the Webpack boilerplate (via Vue-Cli) and are trying to design to have common components:

• A report component
  • Has title, description, type (grid, visualization, etc.) and some setting parameters
• A report list component
  • Has a title and an array of report components as its properties
• A dashboard that has an array of report list components arranged in a grid

Some requirements

A dashboard component can have 4 or more report list components, each with multiple reports that can be selected for view by the user from a report list select menu. Each report component can have one or more setting parameters that the user can manipulate and submit to re-render the report. A report can be a grid (ag-grid in our case) or a visualization-based report. Lastly, there is also authentication via Auth0.

Questions

• Does it make sense to use Vuex to manage state for all our components and related interactions?
• Does it sound like the application is a good use-case for Vuex?
• If so, why? Is it better than using component to component communication via the built in Vue mechanisms (for parent-child, sibling-sibling components)?

Thank you in advance for helping us make a decision.

Answer 1

I voted to close this question, because the answer is highly opinionated.

I've built multiple projects with Vue, some with dozens of components and many multiple thousands of lines of code. I've never once felt the level of complexity rose to the level that I needed Vuex.

You've described an application with half a dozen components.

I've definitely abstracted my logic out into custom objects, but that's just javascript.

YMMV.

Answer 2

Vuex is useful when you have multiple components that need the same state. In your case, you're displaying reports in lots of different places and formats. This is a great use case for Vuex in my opinion.

Now, i don't know if your team is familiar with Vue, but passing data via props is a PITA. Especially if the components that need the data are spread far away in the component hierarchy, and deeply nested, which they usually are. Anyone who's been thru the gauntlet of passing props and emitting events up multiple levels will tell you that.

With Vuex, it's a single function call to get your data, from ANYWHERE in the component hierachy. It's a breath of fresh air.