Pre-Caching Other Folders and Files for Faster Navigation Chapter 7Caching the subfolders
Now that we have the ability to cache a folder without updating the Vue, we can use our
structure object to get the contents of the subfolders. Using the folders array in the
structure object, we can loop through this and cache each folder in turn.
We have to make sure we do not hinder the performance of the app; the caching must be
done asynchronously, so the user is not aware of this process. We also need to make sure
we aren't running the caching unnecessarily.
To achieve this, we can watch the structure object. This only gets updated once the data
has been loaded from the cache or the API and the Vue has updated. With the user viewing
the contents of the folder, we can proceed with looping through the folders to store their
contents.
There is a slight issue, however. If we watch the structure variable, our code will never
run as the direct contents of the object does not update, despite the fact we replace the
structure object with a new one every time. From folder to folder, the structure object
always has two keys, of files and folders, which are both arrays. As far as Vue and
JavaScript are concerned, the structure object never changes.
Vue can, however, detect nested changes with the deep variable. This can be enabled on a
per variable basis. Similar to the props on a component, to enable more options on a watch
property, you pass it an object instead of a direct function.
Create a new watch key for structure, which is an object with two values, deep and
handler. The deep key will be set to true, while the handler will be the function fired
when the variable is changed:
watch: {
path() {
this.displayFolderStructure();
},structure: {
deep: true,
handler() {
}
}
}