What Portion of The Data Should Be Stored Using Vuex?

Question

Hello I deciced to use Vuex for state management in my application. I experiened with state management in Flutter before and most of the data is stored using state management in Flutter and not in the Widgets. When I use Vuex should most of my data be stored in the store divided into modules? or should I use Vuex to store only global data and keep most of my data in the components? I can't find a detailed answer about that, but I saw that if you need more than one emit in the tree of components then you should consider putting the data in the store. Thank you very much for the help and I really appriciate every answer!

Answer 1

In my experience, it really depends on your application. But a good rule of thumb is keeping the store for data that is global and multiple components need to use it or WILL use it, think of the future as well in this case if the app will be extended in the future what data will be needed globally. That data can go into Vuex Store.

Additionally I found that using the Store for asynchronous calls and to process this data makes my components code way cleaner.

And for you question specifically, YES most of your data should be stored there. Think of it as your components are responsible for only what they do, they dont have to know how the data is getting to them and how the data is processed, they just know they need some data and they get it. This usually makes for more understandable code.

I have found these articles Should I Store This Data in Vuex or When Why and How to use Vuex that sum up most of my findings and experiences on this topic, you are welcome to read more here.

Also as a side-note using classes helps a lot too, if it is kind of learner project for you, try experimenting with different styles of project structures. For example you can have a [some_name]_helper.js or [data_type]_processing.js file that contains logic for processing data, or handling data that you use widely in your application, like dates, making your code as modular as possible helps a lot, and ultimately that is what Vuex tries to make easier for you.

(Try to learn the Vuex pattern (getters, mutations, actions) and understand it as much as possible, that is the best way for you to decide what data where goes in you project specifically)