Use Vuex when you face the limit and the restrictions of VueJS.

Currently, the project that I have been working on uses the VueJS (InertiaJS) Framework on the Front-End side (now already Vuex too), and it relies on the Laravel 8 Framework on the Back-End. The final project will be an enormous one with many different microservices communication. However, what is interesting is that I have reached the limit of VueJS's parent-child communication after two or three weeks.

In the project, I have tried to follow SOC as much as possible to have a flexible Front-End architecture with reusable components. But SOC has a drawback in the component tree point of view. Passing data through four-five levels of Vue components can cause a performance issue mainly in the long run. Furthermore, in the case of this project, the need for sharing specific objects and properties among all the components had become an early requirement.

I had to find a fast solution. The project owners need to see that the dev team is making progress.

So I started reading about what other communication options we have in VueJS. Most of the articles preferred Vuex as one of the cleanest approaches, so I have started reading and playing with it in detail. Please check my mindmap about this topic below if you want to know more about Vuex.

Anyway, what is Vuex exactly?

Vuex is similar to a global object where we can store data independently from the components. But this Vuex object is reactive, and we can not directly mutate the store's state while we can access these data from any Vue components. (Store is the center container of Vuex.)
So we can distract the components' data from a Component into a shared state/data manager where all our Vue Component can access it or update it in a specific way. It is like global object storage on steroids.

Anyway, Vuex is inspired by Flux, Redux, and The Elm Architecture.

Flux libraries are like glasses: you’ll know when you need them.

Dan Abramov, the author of Redux.

When we should use Vuex?

Ideally, Vuex is for medium and big projects when you need to separate the data from the components.

What are the main features of Vuex ?

Conclusion & Closing

In this post, I have tried to cover in a mindmap what features Vuex has and when we can use this State Management Pattern in our Vue code. Anyway, you can check the doc about Vuex here.