Now to load all the, to do's we need to
send this age to the peer request for fetching
all the, to do's.
This one here from todos.js,
whenever this view app starts, so to say.
So whenever our page becomes active in Vue,
therefore it becomes active.
And since this is a very common case that you want to
execute some code. When the Vue app starts,
there are so-called lifecycle hooks provided by Vue,
which are special methods,
which you can add to this overall Vue managed object here,
where we also added data and methods,
which will be activated by Vue JS at certain points of time.
That's why they are called lifecycle methods
or lifecycle hooks also.
And here I'll add one, maybe after all those methods,
though, the exact position doesn't matter.
And that would be the created method.
So that's not very important.
This is now not a method that's added to
this methods object here.
If I fold that you see it's next to methods,
not inside of methods, because this is not a custom method,
which I want to call myself or
trigger upon some user input event.
But instead that's a special reserved method name,
just like data or methods are reserved names
Vue JS will be looking for.
And the Vue JS will be looking for such a created method
and it will call that method whenever
this Vue app was created,
which happens as soon as the Vue JS code executes and starts
taking over control over this page,
there also is another built in lifecycle hook method
that we could have used.
And that would have been the mounted method.
It's very similar, but that will become active
once the Vue app was created and
it took control over the Dom,
which means it added all the event listeners to
the Dom and so on.
Created runs a little bit earlier.
It runs when the UJS code executed right before its took
full control over the dorm.
There won't be a huge time difference,
but there is a small gap.
And it's up to you where you want to execute your code
to fetch all the to do's either of
the two lifecycle hooks will work because
both run right at the beginning of this website so to say,
when this website was loaded.
So here I will use created and integrated.
I now want to take that code from todos.js,
where I get all my to do's.
So here we can actually take all that code,
actually all that code here,
including the response variable and add that here
in app JS, like this.
So now inside of created, we fetch our to do's.
We have this standard error handling in there,
and then here, I got my to do's from the response,
which is sent back by the API.
And of course,
I then want to output those to do's on the screen,
now to output that data, we, again,
just want to set our Vue data,
our data managed by Vue.
And when that data changes Vue will therefore
automatically update the Dawn.
So once I got the to do's,
all I want to do is I want to set this to do's.
So my data to do's equal to the fetched to do's
and Vue JS will detect this change in to do's
in this to do's data and will therefore update all
the parts of the screen of the Dom,
where the to do's are being used.
So here we can say,
instead of const_todos equals responseData.todos,
this.todos equals responseData.todos.
To update our Vue managed data
with the to do's we find in the response.
And that will then trigger a page update.
So that should be all. At least almost.
Of course, we again are using the await keyword.
Now in the past, we unlocked the await keyword
by adding async in front of the method
where we use a weight where we use a weight and
indeed that is how it does work in JavaScript.
And if we do that and save everything,
once you reload the page, you should see all the,
to do's here, including the, to do's
in my case, that were created in the past core section,
because I'm talking to the same API,
which uses the same database.
So now these to do's are here and you should not see
any errors in your JavaScript console here.
Now as a little side note at this point,
I want to highlight that we can add async
in front of the created life cycle method,
but I want to make you aware of the fact that
Vue JS does actually call created for you,
just as it would have called mounted for you,
but it does not wait for the promise created or mounted
might return to resolve.
Which means since we add async here,
you'll learn created will return a promise.
That's how async works,
whichever method or function you decorate with it
will return a promise always. And that's okay here,
but Vue JS won't wait for it,
which means it will continue with its life cycle,
even before the responses here, which is no problem here,
but it means that technically initially there is
a super brief period of maybe one or a 10 milliseconds
where Vue JS took over control.
But the data isn't there yet,
we don't even see that here
because our API runs on our local machine.
And therefore the response is super fast.
But if you would be talking to an API where
you wait a second or so for the response,
it would mean that initially,
there wouldn't be any to do's
and they would only appear after a second or so.
Therefore what you might want to do
is you might want to show some loading state
whilst you are waiting for those to do's.
And you can do that with help of
Vue's data management as well.
Here in this data we could add is loading data property,
which initially is false, let's say.
And in all the places where we send the requests
where we then want to wait for a response,
because we can't display data until we have the response.
As it's the case here for all the to do's,
we could then go to the place where we start
sending the request in this case here,
before we even try sending the request.
Instead this is loading to true in this case
because we start loading the data
and then we want to make sure that
once we have the response, we set this
as loading to false because we have the response.
And I actually also want to do that
if we catch an error because then,
of course we don't have a valid response,
but we're also not sending an HTTP request anymore.
So I also set isLoading false to here,
but also here after catching and handling an error.
Once we have a response,
no matter if it's okay or not.
So no matter which status code it has,
we have a response and therefore,
I wanna say is loading to false.
And then we can use, this is loading state, of course,
in the Dom to output some helpful message.
And for example, here, where we have the if,
and v-else on, we could modify this a bit and say,
we want to show this text
if to do's length is zero,
and we are not loading because if we are loading,
we of course don't have any to do's yet.
But that might change.
So showing this text would be wrong
because we might have to do's,
we might just not have loaded them yet.
And instead I'll add another case here
where I'll say "Loading...",
And I want to show that as long as I am loading.
No, you cannot just write v-if,
and v-else you can also add a v-else-if
case for cases like this.
Now when you add this directive,
this Vue managed attribute.
You can add another else-if condition here,
where you say,
if we didn't make it into this condition,
because maybe we're loading,
then I want to check this case.
And here we could say, if we're loading,
then I want to show "Loading..."
And only if we're not loading,
and we have to do is length right here, zero,
I want to make it into this case.
With all of that, If you reload,
you get almost the same behavior as before,
but to show you what's happening,
I'll open the Def tools and go to network.
And there we can actually turn on throttling
and go to slow 3G to throttle the network speed,
and then reload this page.
Now reloading itself will take awhile
until the new index HTML file is fetched,
but then you'll see the loading text here.
And then you see the, to do's.
Now I'll go back to no throttling,
but that is how this works.
And you can play around with that.
And of course all the manage more states,
depending on what your goals for this application are.