Pre-Caching Other Folders and Files for Faster Navigation Chapter 7}
state.path = path
state.breadcrumb = breadcrumb;
}All the variables are now being declared at the top, with the state being updated at the
bottom. The number of variables has also been reduced.
Viewing the app now, it appears to work correctly; however, upon closer inspection, the
breadcrumb seems to lag a bit with the folder structure on initial page load. Once a folder
has been navigated to, it catches up but on the first load it seems to have one fewer item,
and when viewing the root of the Dropbox none at all.
This is because the store has not been fully initialized before we are committing the
updateHash mutation. If we remember back to the Vue instance lifecycle, covered in
Chapter 4, Getting a List of Files Using the Dropbox API, we can see the created function gets
fired very early on. Updating the main Vue instance to trigger the mutation on mounted
instead resolves the issue:
const app = new Vue({
el: '#app',store,
mounted() {
store.commit('updateHash');
}
});With all the folders being cached as well as they can be, we can move on to caching more
API calls by storing the download link for each file.
We could also look into caching subfolders of subfolders, looping through the contents of
each cached folder to eventually cache the whole tree. We won't go into that, but feel free to
give it a go yourself.
Caching download links on files
When the user is navigating around the document tree, the Dropbox API is still being
queried more than necessary. This is because every time a file is displayed, we query the
API to retrieve the download link. Extra API queries can be negated by storing the
download link response in the cache and re-displaying the folder it is navigated back into.