Helpers & Vuex Modules

[00:00:00]
>> The other thing that I wanted to talk about since we didn't really touch this was how exactly to use map state and the specific Vuex helper map state with a module. And so with that, what you're doing is you're essentially, you get the global state object. So this is new because previously we had map state as an array.

[00:00:23]
And now we have map state as sort of this, this object that takes in an object, we call it, whatever we want that state to be called. In this case, we want it to be called stock. And then we're grabbing the state object and then we're grabbing specifically what we need from it.

[00:00:40]
So if you look at the helper up here, you'll see that map state takes in an object. You can name it whatever you want a and b, and this is available as on the context. So this .a is a state and this .b is also a state within that component.

[00:00:57]
And what you're doing is you're grabbing the state object, you are accessing the specific module you need, and then you're accessing the name of whatever you need from that. So states.machine or inventory.whatever the name or the thing is. And so that's how you use Vuex helpers with state in a modularized fashion.

[00:01:22]
And, That allows you to, it's really nice because you get to modularize your code rather than have it sort of live separately. The other piece too using Vuex helpers within a module fashion cuz we looked at using, accessing the globalized store with Vuex helpers. But now we want to grab specific modularized actions.

[00:01:53]
So how do we do that? It's slightly different from how you would do map state cuz map state takes in an object in this case map actions will take in an array. And what you'll do here is you will specifically access it by doing the module name slash the action name.

[00:02:12]
And of course, again from the previous exercise I showed you map actions also takes in an object you can also create an object. Passing in an object will allow you to change the name of certain things which can be really useful in many instances. So here we have just to show you a one to one, we have our store with the various actions and then here it is what it looks like in a component itself.

[00:02:39]
The thing that's really nice about Vuex, is it also gives you a lot of helpers. So not only does it give you the Vuex helpers, it gives you this concept of namespace helpers. So you might notice that when you access let's go to state because that's a fairly straightforward example.

[00:02:57]
If we look at state every time you want to access state in that module, let's say you're always accessing machine or you're always accessing inventory in a specific component, you have to do state.module name.whatever the state is. So state.machine.machineNames. State.machine.lastService. And the more state pieces you're accessing from the store, the more complex that becomes because it's a lot of extra code to always write state.machine.

[00:03:27]
It's sort of similar to writing this.dollarstore all the time. We don't want to do that. So we can actually make it much simpler, by using this helper that Vuex gives us. The helpers called create namespace helpers. And create namespace helpers allows you to pass in the module name, and then you automatically can use object destructuring to grab the map state and map actions with the understanding that you want a specifically namespace module.

[00:03:57]
So for example, here I am only accessing inventory, let's say, and I don't really care about machine or anything else. So I can do create namespace helpers pass in inventory as a string to it. So it's the name of that module. And then I can grab map state and map actions appropriately.

[00:04:17]
And now, with this, I can actually do state.stock or state.supply, which I forget which we called it, without having to do the dot module check. So I don't have to do state.inventory.. I can just directly do state.to grab the object. And similarly for actions, I don't have to do the inventory/ fetch from inventory, I can just do fetch from inventory.

[00:04:41]
And so this is a nice way of doing things without you having to repeat yourself over and over again.