Pre-Caching Other Folders and Files for Faster Navigation Chapter 7When looking at the flowchart, you can immediately see some duplication in events
required for the app. At two points the app needs to decide whether a folder exists in the
cache and, if it does not, query the API to get the data and store the result. Although it
appears only twice on the flowchart, this functionality is required several times, once for
every folder in the current location.
We will also need to separate out our displaying logic from our querying and storing logic,
as we may need to load from the API and store, without updating the view.
Planning app methods
With the previous section in mind, we can take the opportunity to revise and refactor the
methods on our dropbox-viewer app, ensuring each action has its own method. This
would allow us to call each action as and when we want to. Before we head into the code,
let's plan out the methods we need to create based on the preceding flowchart.
The first thing to note is that every time the API is queried, we need to store the result in
the cache. As we don't need to store anything in the cache unless the API is called, we can
combine these two actions in the same method. We also often need to check whether there
are contents in the cache for a particular path and either load it or retrieve it from the API.
We can add this to its own method that returns the data.
Let's map out the methods we need to create:
getFolderStructure: This method will accept a single parameter of the path
and return an object of the folder entries. This will be responsible for checking if
the data is in the cache and, if not, querying the Dropbox API.
displayFolderStructure: This method will fire the preceding function and
use the data to update the structure object on the component to display the
files and folders in the View.
cacheFolderStructure: This method will include the getFolderStructure
method to cache each subfolder—we'll explore a couple of ways this can be
triggered.We may need to create more methods than this, but these three will be the backbone of the
component. We will keep the path and slug-computed properties, along with the
dropbox() method. Remove the rest of the objects, methods, and functions so your
dropbox-viewer is back to basics:
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
data() {