Vuex Modules Solution

[00:00:00]
>> The solution to the exercise is essentially moving a lot of the state actions, getters and mutations into modules. So we created a module called inventory. I'll just collapse everything just so you can see. In modules, we created an inventory as well as a machine module. And then within them, we have states.

[00:00:25]
So here we have, I renamed inventory to supply, it's basically inventory. And then we have our getters to check whether its supply is low. And then similarly with machine, we have the aspect of the machine state, So the name as well as when it was last serviced, the condition.

[00:00:44]
And then we have actions and mutations that update that as well as a getter. And so all of these are modularized. All we did is we moved all of our code into a module. So we essentially modularized our Vuex. And then within the component, we also changed how we're accessing things.

[00:01:03]
Yeah, we're accessing the state with the module. You might notice from this particular exercise, and I did not mention this earlier, that in Vuex, the way how we did things, which is essentially creating a module as such, so we create a module. It has state getters, actions and mutations or whatever.

[00:01:29]
The problem with this is that a lot of things are global, even though it's modularized. And it might not make sense but, bear with me for a second, doing it this way will modularize only the state but not getters, actions, and mutations. So in order to access the getters, actions, and mutations, that's actually global.

[00:01:49]
So one thing you might notice is that this.$stores.getters is not namespaced, or the lowStockItems is not namespaced. Neither is the serviceDate which is specifically the getter, neither is isSupplyLow, and so on.