Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Pre-Caching Other Folders and Files for Faster Navigation Chapter 7

return entries;

})

.catch(error => {

this.isLoading = 'error';

console.log(error);

});

}

return output;

}

The Dropbox filesListFolder method uses the passed-in path variable, rather than the

global one it was previously using. The entries from the response are then stored in a

variable before being cached in the Vuex store using the same mutation. The entries

variable is then returned from the promise, which stores the result in output. The catch()

function is the same as before.

With the data being returned from either the cache or the API, we can trigger and process

this data when the component is created and when the path is updated. Before we do that,
however, we have a mix of data types to deal with.

When returned from the API, the data is still a promise that needs to be resolved; assigning
it to a variable merely passes on the promise to be resolved later. Data from the store,

however, is a plain array that is handled very differently. To give us a single data type to

deal with, we are going to resolve the stored array as a promise, meaning

the getFolderStructure returns a promise, regardless of where the data is loaded from:

getFolderStructure(path) {

let output;

const slug = this.generateSlug(path),

data = this.$store.state.structure[slug];

if(data) {

output = Promise.resolve(data);

} else {

output = this.dropbox().filesListFolder({

path: path,

include_media_info: true

})

.then(response => {

let entries = response.entries;

this.$store.commit('structure', {

path: slug,