- [Instructor] Let's imagine that the new feature request
comes in for the student manager program from the school.
They would like to display the full name of each student
to make it easier.
So to do that,
we'll have to add a first name and last name input,
and then combine the two, and show them in our list.
So let's begin by opening up our NewStudent component,
and let's copy the input field on line 12
and paste it right below.
I'll change the model from name to firstName,
and then the label to First Name as well.
And for the second, I'll change it to lastName,
and the label as well.
Now let's make the changes to our state.
And I'll copy that and paste it below,
add a comma, and change it to last.
Then we'll modify line 39 with firstName,
and then we'll add lastName.
Let's save that, then let's open up our database.
I'll get rid of a few of these just to make it easier,
and I'll change the name to firstName,
and then let's add in the lastName.
Let's save those and give it a try.
Notice that our students are not showing any longer,
but let's try saving a new student.
If we go back to our database,
we can see our new student is now being shown.
So saving is working.
Now let's modify the Students component.
So on line 10, instead of student.name,
we need to change this to student.firstName.
And if we give that a try,
we can now our students once again.
But the requirement was to show the full name.
So to do that for now, we'll simply add a space,
then add student
.lastName,
and I'll actually need to add a space in the quotes,
and let's give that a try.
And now it's working.
But our code is a little bit messy on line 10.
It would be much nicer
if we could somehow compute the full name.
Once again, there's several ways to do this,
but let's look at doing this with a getter.
So let's open up our store.js,
and below state, we'll add a getters.
So in our getters, I'll add students,
and then just map it to state.students.
And now to make use of this in our Students components,
on line eight, in our for loop,
instead of using students, I'll use $store.getters.students.
And if we save that, we can see that it continues to work.
Now let's take a look at how to use getters
to actually combine the first and last name for us
so that we don't have to do it on line 10.
So back in our store.js,
instead of mapping directly,
I'll use a .map,
and I'll specify a function in here
where we pass in a student which I'll indicate with s,
and using the lambda function.
And it's going to get a little bit tricky,
but I'll use a spread operator,
and that's triple dots,
an s for our student.
And we're using the spread operator
so that we don't mutate the original,
and instead we turn a new object,
and then we simply add the new property,
in this case, fullName,
and that will be set from student.firstName
plus, we'll add that space,
student.lastName.
Now let's save that, go back in our Students component,
and instead of doing the combination over here,
we'll just student.fullName.
Let's save that and give it a try.
And as you can see, it's still working.
And so through a getter,
we can do these types of computations on the fly
instead of doing them in each individual component,
keeping our component code a lot cleaner
and keeping our computation centralized.
Next, let's take a look at passing parameters with a getter.