Pre-Caching Other Folders and Files for Faster Navigation Chapter 7},
computed: {
...
},
methods: {...
},created() {
this.displayFolderStructure();
}
});Refreshing the app now will load your folder contents. Updating the URL hash and
reloading the page will also show the contents of that folder; however, clicking any folder
links will update the breadcrumb, but not the data structure. This can be resolved by
watching the computed path variable. This will get updated when the hash updates and so
can trigger a function in the watch object. Add a function that watches for the path
variable to update and fires the new method when it has:
created() {
this.displayFolderStructure();
},watch: {
path() {
this.displayFolderStructure();
}
}With this, we have created an app that, once again, caches any folder you have visited.
Clicking through the structure the first time will seem quite slow, but once you navigate
back up the tree and re-enter subfolders you will barely see the loading screen.
Despite the app having the same functionality as it did at the beginning of the chapter, we
have refactored the code to separate out the retrieval and caching and the displaying of the
data. Let's move on to enhancing our app further by pre-caching the subfolders of the
selected path.