Vuex Helpers Solution

[00:00:00]
>> For this particular exercise, the idea was to use mapState and mapActions. So what we did is we essentially took all of the state that is currently using this.$store, and then we changed it so that it uses mapState. So we are doing ...mapState, and then we're passing in the specific state pieces that we're using.

[00:00:25]
So we're using supply, and this is a typo, we're using isRestocking. So those are the two pieces that we're gonna use. So we no longer are doing this.$store.state, we are, Doing this, I mean we're using this.supply directly and this.isRestocking directly. And similarly for mapActions, you might have noticed that we have the ability, as I mentioned earlier, to rename things.

[00:00:57]
So in my button I called it restock. So I want to map the name of that particular thing to the action, let's say. So I call restock and then fetchFromInventory. And then I can create a method called restock which can then call restock directly. It's important for you to know that you need to have this particular method in your components that hooks up actions to specific pieces that happen in your code like click events and so on.

[00:01:36]
Because that's how exactly a dispatch happens. The action isn't automatically called, you need to have a way of calling it. And so in this case, I have restock, and then I'm calling that specific action, which is called restock because I renamed it. And then similarly I used dispense, which is a separate thing.

[00:01:56]
And so I can create a method called dispense that calls dispense. You can easily rename them, because they can get really confusing. Especially since you might not want them to match one-to-one. So you can just rename it so that it's not dispense, it can be, It can just be dispenseItem, and then you can change it so that it's dispenseItem, and so on.

[00:02:21]
So that is the particular exercise with regards to mapActions, essentially Vuex helpers and using them within single file components. We talked about how exactly to extrapolate the store so that we can use components and so on within applications