- [Instructor] Alright, so
we're going to do something that is known as refactoring
to our navigation,
it really just means moving things around
and reorganizing how we're doing things
to make them better.
So here's what we're going to do.
In order to take care of this,
first, we'll do some housekeeping
and remove our custom alert component,
it's still hanging in there.
And I just used it to show you some techniques.
But we don't really need that in this application,
then we're going to take the home view component,
and remove pieces of it, specifically the Navbar.
And also want to take the cart
that is in the home component,
and move it into the app.vue file.
Now all of this is going to cause major chaos.
So we'll need to go ahead and move the methods
and rewire everything back together as needed
until it all works beautifully.
So here's where you can find
the beginning version of the document.
Here's the trending version.
And there is the difference
if you want to take a look at that.
Alright, so let's go and dig in.
Here we have the home component,
I did say I wanted to remove custom alert.
And you think that just doing this delete here would work.
But that is already going to cause some chaos here.
As you can see, actually,
this is saying that it can't find this
custom alert component that you're trying to get.
So that means that whenever we remove something,
we have to remove all the sort of pieces.
So the custom alert component is imported here.
And then is brought in into this components section.
So if we get rid of that,
our application works just fine like it used to again.
So next up, we'll take care of moving the navigation piece.
And I just clicked on this arrow here in Visual Studio code,
and I'm going to cut this out of here.
And I'll go ahead and save this and then go into Navbar,
make sure that I add that into my template.
And that's probably caused additional chaos,
that we're going to have to refix.
Once you remove the navbar,
you're going to add it into the app.vue file.
So we already have a piece of nav right here.
And we want to do is actually point this
to our new navbar component.
So that's going to involve creating a navbar component,
which we can use the tag like this.
But it does mean that we have to import that into this
app.vue file, just like we do with any components.
So we'll go into,
we actually don't have a script section in here.
So that's interesting, we'll do a script.
And in here, we'll issue the import statement
to import our navigation component.
All ready, so that's going to import that,
there's going to be a lot of work that I need to do
to that navbar component,
because if you remember that navbar needs to know,
essentially, mostly information about the cart.
But all the information about the cart
is sitting over here in the home section.
So you can see that here's where I create the variable
for the cart.
And I also have this display cart item here.
And I also have this cart, total computed property.
So all that stuff is got to come out.
And we have to add it into our other section.
Now we're going to start by,
let's see, I'm going to copy this data section right here.
And go back into app.vue.
Because I'm shocked that I don't have
scripts section in there.
And I'm going to use that data section
maxi doesn't need to be here,
at least not right now or not yet,
then we are going to need the card variable.
And we'll use this display card.
Right now we don't need the products to be
in our application.
We're just worried about the file.
And I think I need something else in here.
Let's see we import this component.
And actually, there should be a slash right there.
And then we have this data function.
This is not quite right.
So let's do export.
Default.
So I just copy that.
And I'm going to use export default,
and then do all that that looks a lot better.
Right, this does mean that I need to bring this
item or the navbar in as a component.
So I'll do a component section
and bring in this navbar component,
just great.
Then I'm going to need to create a methods section
and put in my add to cart method in there.
So I'll grab that from home.vue.
Sometimes in Visual Studio code,
it's really nice if you put things side by side,
so you could just drag a tab and kind of put it over here,
makes it a little bit easier to cut and paste.
So you may want to try that.
Let's see now, some components, we have this navbar.
And then in methods, we're going to look for
the add to cart method here,
which means
I'm not going to have any methods on this component.
That's actually great, because it means that
every component is just going to have the items that they need.
So in component methods,
I'll paste that add to cart method in there for now.
And now that I have this cart variable,
it means that I can pass it to navbar as a component,
and so I'll say cart equals cart here.
And because I know that my homepage
is also going to need to know,
some information about the cart,
then I'll also pass it along here.
So actually, let's just copy it from up here.
The other thing that I need from the homepage is,
let's see, do we have, I see that in the homepage,
in the app.vue file,
I have a bunch of styles,
I'm going to move all these drop down styles,
at least for right now.
They don't need to be here.
So I'm going to take them all out of here.
And also put them in my navbar component, because
I know that this is where I have this drop down.
So that'll mean, we'll have something in the styles,
which is fine.
This almost everything we need to do with the navbar.
For now, or at least with App.vue.
Looking pretty good.
Let's take a look at our navbar.
So another thing that you will realize
is if we look at the navbar,
I am using this currency method here.
And so I don't have that in here,
and then bring it in,
which means that I need to make sure
that I include that in my scripts section here.
So before my export default,
I'm going to import the current component from components
and import that component.
That also means I'm going to need a data section here.
So let me go ahead and prep that.
And I'm going to create the display cart variable here,
that is going to allow me to sort of toggle the display
of the drop down.
So I'll say display cart.
At first, the drop down will be set to false,
so it won't be showing up.
And also in here in my components section,
I'm going to say that I'm going to input
that currency component.
Because I'm passing along the cart,
I'm going to need the props section
to make sure that I'm bringing along the cart
into this component.
And as I mentioned, I also need the cart total.
So we'll go back to the homepage,
I think that method is somewhere over here.
So it's actually a computer property.
So I'll grab it from here.
And after the props going to add compute it
and put it in there.
All righty.
I think I forgot a colon in here.
Now that looks pretty good.
So let's take a look at our project.
And I know that things aren't going to be working.
So it says a couple things here
it says that the currency component and home
has been registered, but is not being used.
So the problem now is
that if you look at this home component,
we are saying that we're going to use this currency here,
but we're not really doing that.
So we need to take that out.
That's what that message was about.
So that looks like it's working okay,
let's see what happens if we try to add something here.
And that's definitely not working.
And sometimes this kind of stuff,
you can open the inspector
and looks like I got 26 warnings here,
that's a good sign that I did something
that's not quite working, right.
So the main problem here is that it's trying to figure out
what's going on with things like the cart total,
there's a component,
custom alert.
I don't know if there's still a custom alert cost
somewhere in here,
there might be a rogue custom alert
also good idea to refresh.
There you go.
So okay, I don't think I have as many
still thinks that custom alert is in there.
So I may need to do a little search for that.
But there's a lot of stuff happening
with cart total.
And other things that are not quite all wired up yet,
I did want to show you the view extension,
because it's actually pretty cool.
It actually shows you what's going on with the application.
So I try to hit this plus sign,
you'll notice that my cart,
which is right here in this section,
is not getting anything added to it.
And then you can also click on these other items.
And notice that there is a cart here as well.
So again, this thing is a mess,
we still have to kind of go around and clean things up.
So I don't know, if I actually add something
that would actually go into this cart quite yet.
There's probably other problems.
But this is nice,
'cause you can kind of look at what's happening,
you can see we're getting the products just fine.
And you can a lot of times
sort of open up an individual product.
And then make sure that the product has
the data that you want it to view developer tools are
amazingly beautiful, I really love those things.
But there's still a little bit more work
to do on this thing.
So, let's get back to it.
And the problem with this split screen
is that sometimes it just takes a lot of room.
So you can just dock it back by putting it right there.
And let's see what else we need to fix.
So into our app.
So it looks like in the home page
in this home component,
I still have the reference the custom alert.
And that was one of the errors that you saw there.
We'll make sure we take care of that.
And then we have this call right here
to add things to the cart in this product section.
So this is one of the things that's really not working.
I'm going to reinstate the split screen for a second.
So right now, I think all of the stuff that's happening here
with the cart now let's see,
when somebody clicks on an item
is actually happening in the product component.
So there's a component here called product.
And this is where all the magic happens
when we click on that plus sign.
And right now it's emitting an event,
right, and you can see that it emits it right here.
But we've actually reposition the cart
into a different section.
So now when it admits this,
technically, it tries to go to the component
right on top of it,
which would be the home component, I think,
and then it tries to emit this event there.
But we need to modify this
because we want it to emit things,
a couple of levels up the chain.
So this is going to actually
have to use this parent variable,
and actually use it twice.
To emit this add to cart method, further up the chain.
And then we are going to
go ahead and put these tabs back over here.
In our home component, we don't really need this anymore,
because we don't need to add things to the cart.
Or at least we don't need to capture that event in here.
So we don't need to pass it along
with each one of the items, since we're doing it
directly on the app.vue page.
So we just need to sort of fix app.vue
to capture that event.
So in router view,
we're going to add, add to cart.
So like an Add To Cart event,
and make that equal to the name of the local method
add to cart.
We've already I think added that here or not.
Here's the add to cart method sitting right here
waiting to capture that event.
So let's see if this works.
Application is looking good.
Let's hit the plus sign.
And now that items are added,
and everything else is working just fine.
So that was a lot of work.
But it's really good to experience
how moving even just a little thing around causes
sort of additional structural changes to your application.
And that's why I usually begin my apps by scaffolding
and then separating each one of the components.
And also this refactoring is really common
because in vue applications you tend to
make something with too many elements
and then you have to think of how to make them smaller
and more efficient.