- [Narrator] Currently, when we're adding a new student,
and we hit the submit button,
we can see that student is not instantly
added to our students list.
You actually have to refresh our web app in order to see it.
Let's see how we can remedy that using mutations.
So in our new student component, if we scroll down
to our submit method, we can see we're making
an axios.post call.
So what we can do is take the data we get back
from our axios.post, which will be the new student.
So I'll create a constant called student.
And set it to await.
And then I'll wrap the whole thing
in order to get access to data.
So now we have our new student,
and we just need to add it
to our students array inside our store.
And we know that accessing the students array
directly in the state is against the rules.
So we'll need to create a new mutation.
Our current mutation sets students,
so that's the entire array,
and we just want to add to it.
So let's create a new mutation called addStudent.
Pass on the state and the single student.
And then we'll use state.students.push
and we'll push in the new student.
Now let's go back to our new student component,
and on line 40, we'll call this.store.commit
the name of the mutation, which is addStudent,
and then we'll pass on the student.
Let's give that a try.
So I'll refresh our web app.
And I'll create a new student.
And we can see it's instantly added to the list.
And it also shows in our student view.
Let's refresh just to double check,
and we can see it still works.
Next, let's take a look at map mutations.