This episode is for members only
Sign up to access "Getting Started with Nuxt 3" right now.
Get started
Already a member? Sign in to continue
Episodes
01. Introduction
46s
0%
02. Installing Nuxt
5m 40s
0%
03. Creating pages
4m 50s
0%
04. Linking to pages
4m 25s
0%
05. Pages with params
5m 59s
0%
06. Using layouts
4m 22s
0%
07. Components
4m 47s
0%
08. Simple CSS and Sass
3m 53s
0%
09. Fetching data
5m 58s
0%
10. Deferred fetching
5m 14s
0%
11. Picking data
4m 14s
0%
12. Fetching within components
1m 52s
0%
13. Client-side fetching
3m 15s
0%
14. Managing head data
3m 19s
0%
15. Dynamic head data
3m 11s
0%
16. Composables
5m 28s
0%
17. Public files
2m 16s
0%
18. Server API
6m 4s
0%
Transcript
00:00
We know from previous episode that when
00:01
we click on each of these to-do items, we go through to to-do slash ID. And that will give in the ID of the to-do that we have here. We did that over on the index just here,
00:12
where we pass in the ID directly from that payload. What we're going to do in this episode is hook up this ID page, practice what we've learned with use fetch, hook this up to actually make a request
00:25
and get back the details of the to-do. And then we're going to talk about a really important best practice in NUX 3, which is data picking. So at the moment, over on this page
00:34
just here, all we're doing is showing the ID that we get from the root, and we're console logging it out here as well. Let's change this over so we can actually make a request
00:44
and grab this data. So we know that we want to do a top level await here. We can use use fetch or, like we did over in index, use user async data.
00:55
It's entirely up to you. Use fetch is probably a little bit easier to use and remember. I'm going to go ahead and pass the URL that we want to request here, which,
01:04
if we come back over to index, is just this here, but then slash and then the ID. Let's go back to ID, pop that in there, and then let's do a slash and just add the ID into this request.
01:16
So let's go ahead and take this from our root, params, and ID. We've already seen that in action, and we know that gives us back the ID that we need. So like with the request that we made over on to-dos,
01:30
we can pass a object down to this. So we can go ahead and pass this in as the second. We can set defer here if we want to. We're not going to do that in this case.
01:40
We'll be adding another option in here in just a second. Let's go ahead and destructure this and assign data, like we did before, to to-do. And let's just space this out a little bit.
01:52
And now we should have that to-do on the page. Let's go ahead and just dump the payload out of to-do. Let's go back over, give this a refresh, and there we go. That's the payload of that request
02:01
that we're making to that server. So we can just output whatever we want here. Let's just say to-do title, and that should just about do it. So we've got the details of the to-do on this page.
02:13
Now, with the overall to-do, which we have just here, let's go ahead and get rid of title on there, we've got a little bit more data, or we may have a little bit more data than we need in here,
02:22
depending on the data that the API you're making a request to sends back. Now, if, for example, we were only using the title in here, which is, of course, unlikely,
02:34
then what we can do in NUX3 is pick out only the data that we need to be stored in this payload. Now, this is really important because when we use useAsyncData or useFetch,
02:46
the data that we get back from this is stored inside of the page payload. And if you are storing more data than you need, you're gonna see a performance decrease.
02:57
So the best practice here would be to pass in the object that we see here, and then pick out just the data that we need. Let's just say that that was ID and title.
03:09
Let's go ahead and just take a look at what to-do contains now. We'll go ahead and comment this one out. So let's go over, give this a refresh, and there we go.
03:15
Sure enough, we only have the ID and the title. So I'd recommend that you do this for any request that you make and pick out just the data that you need.
03:25
Now, unfortunately, at the time of recording, this doesn't work for objects or arrays that contain multiple objects. So for example, over on our to-dos page here,
03:34
what we couldn't do is go ahead and pick out the, say, ID and the title from this array that we get back from this request of objects that we have in here.
03:46
That might be added later, or you might be able to get around that somehow, but for now, it's just going to be for single-level things with keys and values.
03:54
So we've now got just the data we need. We can go ahead and use that as we need. So we can put that in there, and then we could output the to-do ID.
04:03
But that's a really important addition to Nuxt where we can pick out just the data we need so that the payload on the page has less data and therefore a performance increase.
18 episodes•1 hr 15 mins•3 years ago
Overview
Nuxt is a framework built on Vue that makes development of applications a breeze. In this series, we'll get set up with a fresh project and work through everything you need to know to start building with Nuxt.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!