DEV Community

loading...

Discussion on: Architecting Vuex store for large-scale Vue.js applications

Collapse
ausmurp profile image
Austin Murphy

On a large scale Vue application, one thing you should absolutely do is utilize SOLID code patterns. Consider creating 3 base store classes to manage CRUD, CRUD arrays, and paged state. Trust me, that will save you a ton of time, and boilerplate.

Collapse
haxzie profile image
Musthaq Ahamad Author

Awesome. Thanks for the suggestion! Would love to learn more about this. Any pointers?

Collapse
ausmurp profile image
Austin Murphy

This is where Typescript proves it's worth, as you can simply create these 3 classes, each extending the previous:
BaseStore<T>
ListStore<T>
PagedStore<T>

You have to use dynamic modules for this to work. Then your base store contains functions to mutate state as a whole, setState(T state), changeState(indexOrProp: string | number), clearState(), etc. And state$ across all 3 classes is:
T
Array<T>
Page<T>

Collapse
syaleni profile image
Siavash Habibi

Would love to see a post on that! I'm working on a project where I'm making a dashboard for a db with more than 20 years of sales data and all I worry about is how large the data can be and how to deal with it. I was thinking about making a base store and then extend the base store for each year... But even one year of data is large enough to impair the app if it's not handled properly.