Getters

[00:00:00]
>> The next piece of what I wanted to look at is this, the part about getters, which is something we didn't actually talk about, but we will now. So we have actions and mutations, we talked about that in length in terms of an action creates an asynchronous fetch, which is pinging inventory or fetching from inventory and then it commits specific mutation.

[00:00:20]
And so if you looked at the stock counter, that is the supply or the change in which the supply gets changed, so you see a decrement, increment and so on. But the thing is, it's useful for us to perhaps add a layer of information on top of it.

[00:00:36]
So we want to perhaps add a layer of information over the specific supply itself. So right now we have this action that happens and then the mutation changes the specific supply. And then we looked at the code specific to that. Just the idea from lines 22 to 30 is where we're actually fetching inventory and then updating specific properties and so on and mutating.

[00:01:04]
But of course, we want to look at getters specifically in detail because we talked about actions and mutations. We didn't really talk about getters, we sort of glossed over that. And so let's look at that particular piece of Vuex because it can be really useful in our applications.

[00:01:19]
A way of thinking about getters is that it's a way of computing derived state. What I mean by that is it allows you to look at your state within the store and then check for certain properties. So something that might be useful is you might want to check whether or not your supply is low.

[00:01:40]
I shouldn't have started 40, there you go [LAUGH] terrible top, it should have been 10 never mind, we're here now. So you might have noticed that I have added a sort of a caution icon onto my supply and what this is doing is it's checking to see whether supply is below a certain number, and if supply is below a certain number, it shows this specific thing.

[00:02:07]
And so for this I'm using a getter. What it's doing is that specific getter, which shows this caution icon is just looking at my state, in this case, the supply in the state. And it's checking to make sure that it doesn't fall below a number and if it does, then it tells the front end that something has changed and you sort of see that bubble up.

[00:02:29]
So that's really useful. And so this is where a getter comes in. You have two pieces, we looked at state which is state gets changed as actions happen and mutations happen within your store. But you can also add a layer of information like a getter, so the getter checks for state and then adds extra things to your front end that can be really useful.

[00:02:50]
So let's look at what that looks like from our application itself. So, we'll start by looking at our store specifically, and we'll add a getter to our store. So on line 13, I created getter called, is supply low. Personally, I like to call my getters as sort of like a question because oftentimes you can think of a getter as you're asking your store what's in the state.

[00:03:21]
So is supply low is like is supply low, and then the getter will tell you yes it is or it might tell you what exactly the thing you're asking for is. That's a useful way in which I name my getters just for a fun way of thinking about it.

[00:03:36]
So in this particular case I called it isSupplyLow. And so isSupplyLow is a true, false question. So for that I'm just checking specifically whether or not the supply has fallen below 10. So is state.supply below 10 and it's just returning true or false the state at which that is.

[00:03:58]
And then from the component itself, I'm creating again, we're using computed properties because, a getter very similar to state gets updated as mutations happen, because a getter is checking state, state gets changed very commonly. And so getters also are changed very similarly. And so I'm using a computer property because I want my view instance to always be aware when something happens like state, or getters in this case.

[00:04:24]
And so I'll call my getter isSupplyLow. And then I will essentially check the getter in the store. And again, very similar to checking for state you're doing this .dollarstore.getters dot name of the specific getter. So the getter is called isSupplyLow. So I'm doing this .dollar.store.gettersisSupplyLow. And all that's doing is it's returning that true or false that I can then use in my front end itself.

[00:04:52]
So that's a really useful way in which I can use a getter to propagate some kind of attribute or show some data from my front end itself. And the reason I use a getter is because let's say I have multiple different components that all show various inventories. I want to be able to reuse that piece of logic.

[00:05:14]
You could easily write this in your component itself, but it's useful as a getter because it's specifically checking the store. So there was a question in chat about why getters are cached. I sort of glossed over that. But I did mention that getters are cached. But something you may have noticed is that getters are constantly updated as state changes.

[00:05:32]
And so the reason I say it's cached is it's cached in the event that state doesn't change. So a computer property generally is cached unless something changes to update itself. So that's why I say it's cached, it's not cached always as in, it's not cached and never updated, it's cached when updates don't happen.

[00:05:53]
So you're not constantly querying state itself. So for instance if state isn't changing, the getter is not constantly checking and asking the state whether or not it changed if nothing's changed.