Namespace Vuex Modules

[00:00:00]
>> So you might notice, [LAUGH] as I mentioned that you have getters and actions and various other pieces in addition to state. So the state works for modularizing things but not for actions and getters. And that's because in vuex, modules only work as modules and are only namespaced if you tell it to namespaces, so it automatically namespaces it.

[00:00:24]
If it states specific but it doesn't namespace for actions and getters, it automatically gets added to the global. So in order to access it, even though it's within the module, is still on the global namespace. Does that make sense, okay, cool.
>> So you should make sure your actions and getters ditcher getters from different modules don't have the same name?

[00:00:52]
>> Yeah, so the question was that considering this, and the fact that actions and mutations and getters are not namespaced and are global, you might want to make sure that the naming of all of them are unique to the module or unique across the board. So, for example, you might have a restock in one module in a restock in another module.

[00:01:18]
That will cause a namespace clash, and that's sort of one of the problems of using vuex modules, and we'll look at a solution to that in just a minute here. And so I wanna just show how exactly to access things. So with vuex helpers, again vuex helpers is specifically a pattern that is vary based on preference.

[00:01:42]
Some people really don't like it, but I thought I'd show it just to show you what I mean here. So if you used the getters and actions in a module, again, it's not namespace its global. If you were to use your vuex modules, one thing to note is that you are still accessing it globally.

[00:02:00]
So you're just grabbing like map actions is a giant array, and then you grab all the actions specific to it. So even though they are modularized, they're still in the global namespace, just a quick note there. And so one thing to know to circumvent this so that everything is namespaced is to add the namespaced true attribute, and this is explicitly telling vuex to always namespace your module.

[00:02:27]
I know it sounds counter intuitive that a module should be namespace. But I think the idea here is that you are explicitly making sure and making space for all of those actions, mutations and getters to live as separate modules, so they're not on the global namespace they are localized.

[00:02:46]
So with that you can actually access them specifically. So namespaced true is sort of the kicker of what you need here. And so with namespaced true, we can now actually access our actions and getters and so on, on the module namespace. So, again, the way we access state hasn't changed, because previously without the namespace true, you could still access it as a module.

[00:03:12]
But the thing that changes is how you dispatch your actions. So on line 25 and 28, I'm specifically dispatching fetch from inventory which is on the inventory namespace. And then similarly, on line 28, I'm dispatching serviceMachine, which is on the machine namespace. And so, on the namespace true is the solution and is the thing you need if you really want to make sure that your actions, getters and mutations follow this modularized pattern, so you're telling vuex to do that.

[00:03:46]
And so, the next exercise that we're gonna do is we're just gonna namespace our vuex module, and then update all of our actions and getters appropriately. And so with that, we'll dive into the solution. All right, so the solution here is we're trying to namespace our modules. And so what I'm gonna do is, I'm gonna do namespace true, I think it's with the d, yes.

[00:04:14]
And then I'm gonna find my machine, and I'm just also gonna do the same thing. Which I'm gonna make sure and so with this, it actually makes sure that every single module, so machine inventory in this case is namespace. And so with this namespace, we can now update our component so that it is appropriately namespace as well.

[00:04:37]
So obviously our state doesn't change, because state doesn't really change in any way, but I'm gonna update my getter. And so low stock items, I believe is under inventory. And so, I'm accessing low stock items on the inventory namespace. Again, this is like, getter specific code. And then similarly, I'm also accessing this which is on the machine namespace.

[00:05:11]
So my getter will look at the machine namespace and then find the specific getter within it. And then here I also wanna update that. So is supplyLow is on inventory. And lastly I need to check that this is on the machine namespace is machine working is on the machine namespace.

[00:05:43]
And then lastly, I also need to make sure I'm dispatching properly, because currently dispatches dispatching directly to serviceMachine but I need to dispatch specifically on that module. And so, I believe that's covered, most of it, yes. Let's see if work [LAUGH] my gosh. Yay, it worked hurray, okay.

[00:06:08]
So, that's essentially how you move two namespace modules. Let's see what that looks like in DevTools, just so that you get a sense of like how exactly things look like from the DevTools perspective. So I'm gonna load state. And so, now within state you'll see that you have this thing called inventory and machine, like you no longer have sort of a global state, so to speak, everything is namespace.

[00:06:40]
So state has an inventory object as well as a machine object,getters is supplyLow item as well as machine object. Well, a machine object and then this should be namespace but I guess it wasn't moved over. So the idea here is that now we have this namespaced true attribute, so our supply is namespaced.

[00:07:02]
Obviously state doesn't change much, but the getters does. So this particular getter is specific to that machine namespaced, so you can't access it outside of it. So that is the first step to using and namespacing our vuex modules, which fixes a lot of the issues we had earlier.

[00:07:24]
Where state was the only thing that was namespaced and not actions, getters and mutations. So adding the namespace true is one way to making sure that you can fix this problem.