- [Instructor] In this video,
we will take a look at a View X helper called map state.
Previously we had a component state
in our student component.
So if I undo our changes, we can see it right here.
But of course if I change this
to this.$store, and try to access the student that way,
and refresh, it won't work.
So if I add this to computed instead,
and create the function in here called students,
and then return the store version of students,
I'll remove the data version of students on line 25
so that there's no conflicts.
And now if we try this and refresh the page
we can see that it is showing.
And so it is now reactive.
So how does map state help us?
It can be quite helpful when there are multiple states
we need to have inside our component state.
But in this case we only have one,
so I can't demonstrate its effectiveness,
but I can demonstrate its use.
So what I'll do is I'll wrap our computed object
with a function call to mapState.
And now within that I can use an arrow function
to easily map and access the state.
And then we just need to import it.
So I'll do that below our last import.
Let's save that and give it a try.
And we can see it's still working,
and our code is now a lot cleaner.
And as mentioned, this would be even more helpful
if we had multiple states we needed to map to.
So before we continue,
let's get rid of the students debug text
we have on line three.
And we can save that.
Next let's take a look at View X getters.