Vuex Helpers

[00:00:00]
>> So now that we've talked about various parts of Vuex and using it in single file components, we're gonna talk about a really quick pattern that I really enjoy. It's called Vuex Helpers. And it's a way in which you can write Vuex in a way that is super clean and clear.

[00:00:14]
And it reduces some extra boilerplate code that you have to write. So far we've looked at our code in the context of the store, obviously, cuz we're dealing with the store itself. But, specifically, when we are talking to the store and getting access to the store, we need to access it using this.$store.

[00:00:35]
So, for instance, if we're accessing the state or the stock, for instance, we need to do this.$store.state.stock, and so on. And so this can get really clunky, the more pieces of states and the more dispatches to the actions that we're doing because we always have to do this.$store.

[00:00:55]
Helpers is one way in which we can reduce some of that extra code. And it gives you a way of writing Vuex without having to have extra code associated with it. In general, with Vuex Helpers, you have the ability to mapState, Actions, Getters, and Mutations. And we'll look into what that looks like now.

[00:01:18]
So, what I wanna do, is I want to refactor my state. So, I'm not doing this .$store.state.stock anymore. I'm doing a mapState. So, the way mapState works is that, mapState takes in an array of all the states that you want to access. So, in this instance, I want to access my stock.

[00:01:41]
And so I can do mapState, like ...mapState, and then access the specific attribute. And then I no longer have to write this.$store.state. I automatically have access to the item that I want access to. Similarly, we can do the same for mapActions. We can get rid of this.$store and dispatch.

[00:02:04]
And we can use the ...mapActions, and we can parse in the name of the specific action we want access to. So if fetchFromInventory is the action we want to dispatch, we can specifically grab that action. Unfortunately, there's no way for you to call that action without explicitly doing so in a method.

[00:02:27]
So we still need to have the action called restock. And restock is just calling the action fetchFromInventory. And that's necessary just to hook those two pieces up, so it's a bit cleaner. Because if you don't do this, the viewInstance doesn't know what exactly fetchFromInventory is on component initialization.

[00:02:50]
So, the method is just a way in which we can make sure that the viewComponent knows exactly what action to call when it needs to call. And so we can also do something really neat with mapActions, specifically. And that is we can rename the actions that we're trying to access.

[00:03:10]
So, the array syntax is nice because we can just grab the specific action. But there are times when you want to rename specific thing for clarity. And in this instance, what we can do is we're not passing an array, we're passing an object. And so I'm going to rename fetchFromInventory to restockItems as you see on line 23.

[00:03:32]
And then I can appropriately access it in my restock method on line 25 by calling this.restockItem. A very key thing to note is that your method and whatever you call your action cannot be the same. Because view will actually have a error, which is the maximum call stack reached because it wouldn't know which one to call.

[00:03:59]
So you want to make sure that your action is named differently from your method itself. So that's something really important to know.