Pre-Caching Other Folders and Files for Faster Navigation Chapter 7this.f.download_link = this.link = data.link;
});
}
});This essentially means this.f.download_link is equal to this.link, which is also
equal to data.link, the download link from the API. With this being stored and displayed
when the folder is navigated to, we can add an if statement to see whether the data exists
and, if not, query the API to get it.
created() {
if(this.f.download_link) {
this.link = this.f.download_link;
} else {
this.d.filesGetTemporaryLink({path: this.f.path_lower})
.then(data => {
this.f.download_link = this.link = data.link;
});
}
}Doing this on file creation saves the API being queried unnecessarily. If we obtained this
information when caching the folders, we could slow down the app and be storing non-
essential information. Imagine a folder with hundreds of photos in it—we wouldn't want to
query the API for every one of these just on the off chance the user might enter that folder.
This means everything in our app only needs to query the API once to get the information.
The user can navigate up and down folder structures as many times as they want, with the
app only getting faster as they do so.
The complete code—with added documentation
With our app complete, we can now add some much-needed documentation. It's always
good to document your code as this gives it reasoning and explanation. Good
documentation should not just say what the code does, but why it does it, what is allowed,
and what is not allowed.