- [Narrator] In this video,
we'll look at how to update the student's list
as soon as the backend tells us
we've modified a student name.
So if we make a change right now...
It does not update the student's list.
So let's fix that.
The problem lies in our store actions for edit student.
We're not doing anything with the response from the backend.
To solve that, it's quite simple.
We'll create a new constant called student,
and set it to the await.
And then wrap that to get our data which is our student.
In create student, we do the exact same thing,
and then commit the new student
with the add student mutator.
But we don't currently have a mutation for editing student.
So we'll need to create that.
So in the mutations list,
let's add a new mutation called edit student.
I'll pass in state and then student.
The first thing we'll have to do
is find the existing student by the id.
And so we'll do something similar
to what we have in our find student getters.
So I'll copy the following line of code,
and paste it in our edit student mutation.
Now in here, we'll have to modify
this student that we found.
The problem is this just gives us the value,
and we need reference to the actual student to modify it.
So, one thing we can try is to get the index.
And let's save that index.
Then we can simply type in students.
And then using the index,
we can set that student to the student we pass in.
Let's see if this works.
The last addition we'll have to do before we try it,
is to go down to our edit student action,
and commit our mutation.
And I'll pass the student.
And we'll need to make one quick fix
to line 26 where we check for the id.
We'll need to specify student dot id.
And we'll also need to fix the line 27.
We need to access students through state.
So let's give that a try.
I'll modify the first name, and hit submit.
But we don't see a change without refreshing the web app.
And so we can see that modifying an array
through this method will not work.
In order to modify an array in a mutation,
we'll need to use view dot set.
So, below line 27, we'll add view dot set.
And we'll specify the array name, which is student.
We need to specify the index, which we already have.
And then the value, which is student.
Let's get rid of the line above.
And we need to specify state dot students.
Let's give that a try.
So I'll refresh our web app.
I'll make a change, and hit submit.
Now we can see that change instantly.
Or rather, as soon as the backend responds.
The final thing I'd like to point out
is that there are map actions
just like there are map state,
map getters, and map mutations.
And they work just the same way.
In fact, they work nearly identical to map mutations
where they can be added to the methods section
in your component.
We've completed most of our goals,
and we're left with one final goal.
To create an error popup system
for when the server might have a problem,
or there might be a communication problem.
Let's look at how to do that next,
and how to separate it
from the rest of our store using modules.