Dynamic Modules Solution

[00:00:00]
>> I'm at vuex static versus dynamic modules. All right, so we're back and we're gonna look at the solution for how exactly we want our code to look. So just to review really quickly, we were looking at updating operatorView component such that we're extrapolating the store and dynamically loading it in that component.

[00:00:18]
So let's do that. What I'm gonna do is I'm gonna do a couple [LAUGH] Of things. I'm gonna create a modules folder, so let's create a modules folder. And then within the modules folder, I'm going to create a machine.js file. And what I wanna do is I'm essentially taking all of this code and I'm moving it into that specific part of the app.

[00:00:46]
So there's no longer a sets of modules. Everything live in here. For brevity, I'm going to use the code that works. So I created, essentially I'm doing an export default. And then there's some state there's actions, getters, mutations and this is all what was living in the state itself, except for the fact that I now have a module.

[00:01:14]
And so my store has nothing in it anymore, so I can actually nuke this part because it's no longer, this like really nothing in the store anymore. And what I can do now is I can go into my OperatorView components specifically and I am going to create some stuff.

[00:01:42]
So I'm gonna created and I'm gonna do like a register. I feel like it's a register module. Yep. So I'm gonna register a module. And in my instance, let me, I'm just gonna hard code it for now. So I'm creating a module that has a name of machine and then a machine and so the next step would be to import this specific module.

[00:02:32]
So I'm going to store modules and I believe it's called just machine. So I imported that specific module and then I'm registering that module. And so with that, I believe my code will work. Famous last words. Okay, it works. Yes, hurray. It works and it has console errors as I mentioned and that's because all of the various pieces as you notice it cannot read property time service.

[00:03:09]
That's because every single piece of the vending machine item in the list is using that because it has that button hooked up. And currently there isn't a concept of that. So we'll work on fixing that. But this is sort of the solution for this particular exercise. Are there any questions?

[00:03:27]
>> When would you think about using these dynamic modules? I see what you did here.
>> Yeah.
>> And you could have achieved that by just storing the state for each of those service items within each of those rows. So what is it that you think about when you think about why you'd wanna use dynamic modules in a real app?

[00:03:50]
>> I guess this is a good instance, like if for instance, only one component is using this particular module and you don't need it anywhere else across the application. So like one instance, let's say you're logging in your user with certain permissions and you are trying to access a new site.

[00:04:22]
As a user or reader, you don't need access to certain states that specific to admin. So for example, I don't know. The admin might have specific pieces, specific actions like change date or change title or whatever. And you don't want someone who doesn't have those permissions to have access to that module, you don't actually need it honestly, it's a waste of a module to have.

[00:04:52]
And so you don't even want to load it completely. So you can, with dynamic modules. The module is only loaded if the component is loaded. And so it's one way in which you can extrapolate and sort of, it's pairing down what gets loaded. So there is a performance benefit if you think about it, because you're not loading a module you don't need, if you don't need it at all.

[00:05:19]
Does that make sense?
>> Yeah, that makes sense.