Pre-Caching Other Folders and Files for Faster Navigation Chapter 7folders() {
...
}
});The parent structure is going to be on the creation of the breadcrumb component.
However, as we don't want this to hold up the loading process, we are going to trigger it
when the component is mounted, not created.
Add a mounted function to your component and assign the folder's computed value to a
variable:
Vue.component('breadcrumb', {
template: '...',
props: {
cache: Function
},
computed: {
folders() {
...
}
},
mounted() {
let parents = this.folders;
}
});We now need to start caching the folders; however, we can be smart in the order that we do
it. We can assume that the user will generally go back up the folder tree, so we should
ideally cache the direct parent before moving onto its parent, and so on and so forth. As our
folder's variable goes from the top down, we need to reverse it.
The other thing we can do to improve performance is to remove the current folder; as we
are already in it, the app would have cached it already. In your component, reverse the
array and remove the first item:
mounted() {
let parents = this.folders;
parents.reverse().shift();
}