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

We can now use the data if statement from the previous code inside of here, with space

for the Dropbox function call. We can assign the data to output straight away if it exists in

the store:

getFolderStructure(path) {

let output;

const slug = this.generateSlug(path),

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

if(data) {

output = data;

} else {

}

return output;

}

With the Dropbox API call, however, we can tweak it to suit this new code. Previously, it
was retrieving the data from the API and then firing a method that then saved and

displayed the structure. As we need to store the data retrieved in the output variable, we

are going to alter the flow of data. Instead of firing a method, we are going to use this

opportunity to first store the response in the cache and then return the data to the output

variable.

As we only use the entries from the API call, we are also going to update the store to only
cache this part of the response. This will reduce the code and complexity of the app:

getFolderStructure(path) {

let output;

const slug = this.generateSlug(path),

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

if(data) {

output = data;

} else {

output = this.dropbox().filesListFolder({

path: path,

include_media_info: true

})

.then(response => {

let entries = response.entries;

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

path: slug,

data: entries

});