- [Instructor] In this video, we'll use actions
in order to edit the students' names.
So let's begin in the store and we'll add a new action
and I'll call it editStudent.
And just like before, we'll pass in the names.
And now, let's go back to the EditStudent component
and let's copy the axios.put call
and paste it in.
For the second parameter, we'll erase what we currently have
and just pass in names.
But there's a problem.
We need to know the id of the student
and so we'll have to pass that somehow.
So we can create an object that has names and id.
So back in our EditStudent component, above line 53,
we'll add a new call to this.store.dispatch.
We'll specify editStudent
and then we'll create an object
that has the id, which we'll get from this route.params.id.
And then let's create a names property
and we will need to pass in the first and last name
within the names object.
Also, we need a comma right after the action name.
Getting the first and last name is going to be
slightly tricky just because of the way we have
our components set up.
Let's attempt to do it now and then improve
our component later on.
So I'll create a constant called firstName
and I'll set it to
what we copy here from line 22
and I'll paste it in.
I also need to set this to this.findStudent.
Then I'll copy this line, paste it below,
and change it to lastName.
And now, we can pass in
firstName
and lastName.
And then we can get rid of the axios call
between line 58 and line 61.
And before we give this a try,
we'll also need to add this to the beginning of route
on both our lines.
Let's save it and try it out.
So I've refreshed the web app
and I'll add something to the first name.
I've hit Submit
and you can see the change has been made.
And let's hit Refresh
and we can see the change is still there.
Let's go back to our Students List,
select the first student, and make a change.
Another problem you might have realized is that
by making a change here in our input,
we're actually mutating the state in our store,
something we learned earlier we should avoid doing.
And so we've now realized that working with inputs
and Vuex is a little tricky
and we'll have to handle it a bit differently
than working with a model.
Instead, we'll bind to value
and that's with two colons in front.
So I've changed that on both line 22 and 23.
Let's take a look at that change.
So I'll refresh.
And now, if I make any change to the name,
you can see it does not change the value inside our store.
The problem is, though, if I hit Submit and I refresh,
you can see there's no actual change taking place.
And that's because there's no longer two-way binding
to our findStudent.
It's just getting the value from it.
And now, if we add a v-model on top
with maybe a firstName that we might add to our data,
you might think that could work
and we could just get the value from our firstName.
The problem is, it would two-way bind to that
instead of findStudent.
Let me demonstrate.
And I'll just do the firstName for this demonstration.
So I'll refresh
and now, you can see we are no longer getting
the correct first name, so that won't work either.
What we'll have to do instead
is to use the value and then we'll create a function
that will get called whenever we change
the input using @input.
So let's do that to firstName.
And then let's add a firstName again to our data.
Then let's go down to methods
and create a new method called updateFirstName,
which will take in a value.
And for now, let's just console.log that value.
And you can see that with every change I make,
that event gets called.
So I'll get rid of the console.log.
And I'll simply set this.firstName
to the value.
Now, it's as simple as modifying line 59
where we dispatch our action, this.firstName, instead.
Let's save that and give it a try.
And if I refresh, you can now see the change.
Let's make that change to the lastName as well.
So I've added the event for updateLastName.
I'll copy this method
and change it to updateLastName also.
Then let's add a lastName to data.
And finally,
let's set this.lastName to the value.
And now, all we need to do
is update the dispatch on line 60.
Now, let's go ahead and give it a try.
So I've modified the last name and hit Submit.
Now, if I refresh,
it partially seems to be working,
but the first name did not save.
And that's because I made no changes to the first name
and so it never had a chance to update
the local firstName inside data
since this event method did not execute.
So in this case, what we can do is we can set firstName
on line 57 to this.firstName.
And if it's an empty string,
we'll supply the value from findStudent.
So I'll just copy this below, paste it here,
and change this to firstName.
Now, let's do the same thing with lastName.
And now, we can dispatch
with our local first and last names.
But first, let me do a quick optimization.
I'll create another constant called student
and I'll set it to this.findStudent.
And then I simply need to provide student.firstName
and student.lastName.
And now, we're only searching once.
Finally, let's update the dispatch object.
So I only need to pass in firstName
and lastName, and that will use the local strings.
Let's save that and give it a try.
So I've refreshed our webpage.
I'll put in my first name
and I'll make sure not to modify the last name.
Let's refresh and now, we can see it maintained the value
of the last name, even though I did not modify it.
Same with the first name.
Now that we have that working,
you might have noticed that any change we make,
we don't see instantly in our Students List
and we have to actually refresh.
We faced this problem before under different circumstances,
so let's try and see how we can solve it with editStudent.