- [Instructor] We have updated our app component
in order to use store dispatch,
to get our students using actions.
Now let's look at using actions in order to post
a new student and to edit an existing student.
Let's begin with our new student component.
Instead of making the axios call here,
and then committing the mutation in the component as well,
we'll do all of that inside our store.
So let's add a new action.
I'll call it createStudent.
And then let's grab the axios call,
paste it in,
and then call context.commit,
set the mutation name which is addStudent,
and pass in student.
Just to keep it consistent I'll modify line 28
so that it's also a constant.
Next we'll have to figure out how to pass
the student's first name and last name
as parameters inside our createStudent action.
So let's look at this patching an action
inside our new student component.
So I'll get rid of everything including the map mutation
between like 43 and line 45, and line 40 and 41.
And instead I'll call this store dispatch,
specify the action name which is createStudent.
And then we'll need to specify our payload,
which will be the second parameter.
So I'll create an object, specify firstName,
and pass in this.firstName,
and then same for the lastName.
Then let's go back to our store,
and beside context we can receive an object
that has first name and last name.
And then we'll simply pass first name and last name
to the backend.
Let's save that and give it a try.
So I'll go over to New Student,
and I'll create the new student and hit submit.
And if we go down we can see our new student,
and if I refresh they're still there.
And then even easier solution
would be just to pass in names
and pass along the names to the axios call.
Let's try that.
And you can see it's still working.
Next let's look at how to modify edit students with actions.