- [Instructor] In this video, we'll take a look
at mapgetters in order to map the stores isloaded getter
directly to the component.
And this should reduce the amount of code
inside our if conditions.
So let's scroll down and the first thing
we'll need to do is import it.
So I'll import mapgetters from vuex.
Now below student, we'll add a comma
and we'll add our mapgetters.
But we'll start with a spread operator,
so that we can mix the getters into our existing computed.
Then we'll specify a mapgetters,
and we'll pass on a list of the getters
we'd like to include.
So I'll add in isloaded.
Then let's go up and test this out.
So on our v form on line 18, instead of accessing isloaded
through getters and through store,
let's just access it directly now.
Save that, and let's give it a try.
And I'll refresh just to be sure.
And it you see it's stills showing our component,
therefore it's working.
Let's go ahead and change that to the rest of the lines,
that use isloaded.
And now let's do the same thing with student.
Since student is just wrapping a getter from the store.
And so we can use mapgetters instead.
Then I'll copy the parameter from line 47,
that be pass and to find student.
And now let's go to the top and on line 22,
we can pass in a parameter.
And we'll do the same on line 23.
And we need to get rid of this.
And then I'll just get rid of the student function.
So let's save that and give it a try.
And as we can see, we are getting an error,
saying unknown getter student.
If we go back to our store,
we can see that we actually have it called find student.
So let's go back and if we scroll down
and if we update line 48 with find student
and then line 22 and 23 as well.
Then let's save this and give it a try again.
We can see it's now working.
So we've now seen how to use mapgetters
and how to pass properties to a specific getter
using mapgetters.
A bit of personal preference,
but in this case I prefer the old method
since by using mapgetters when we have to pass a parameter
we actually end up with more code in our template
by saving code in our computed.
And my preference is that there
is less code inside the template.
So it's up to you whether you wish to undo
and revert back to the old changes or keep it as is.
I will leave it as is, just for demonstration purposes
and if you wish to access this code in the exercise files.