Vuex Modules File Structure

[00:00:00]
>> The other thing that I wanted to highlight that is really useful and working with modules is the ability for you to structure your files so that it allows for modules. So here's a really quick overview. I just wanted to show you this. We won't be doing exercises regarding this but I think it's a really useful concept.

[00:00:20]
So, what I have here is I have a structure of a view file, movie folder structure. And so you might notice that I have a store generally speaking, there's an index.js in the store. And that's how Vuex CLI does things, it just automatically adds a store folder with an index.js file.

[00:00:39]
And then within store what I wanna do is I'm gonna assume that I have multiple modules, so many modules. And it's really annoying for me to always have to put the modules in index.js because my index.js file becomes giant. There's so many, the whole point about extrapolating modules and making them modules is not only to have that namespace but also for readability.

[00:01:01]
And so one other way in which you can make your code a bit more readable, is I can create a module folder within my store and then within that, I can create specific modules like inventory and machine and so on. And so that is where the bulk of like my code can live specifically like the state and actions and so on.

[00:01:22]
I can actually take that one step further. And this is not specific to modules. This is just specific to how you organize your state actions getters and mutations in Vuex, but I cannot just have a single inventory.js file. I can also split my state mutations, actions and getters into separate files, and then sort of bring them together in index.js file.

[00:01:46]
That way I can just access files separately so everything lives separately like state lives in one file actions live in another. And so again, you have very pared down files, you know exactly where to look when you're looking for state. It removes any confusion with regards to the order in which things are.

[00:02:07]
So it stayed on the top, it stayed on the bottom. It completely removes that if you create a folder structure like this. So that's a really nice tip for doing it. I think throughout the exercises, we'll talk a little bit about the different parts of, we might be using some pieces of this.

[00:02:23]
But again, it's a really useful concept, especially if you're looking to clean up your UX folder structure and make things clean.