Caching the Current Folder Structure Using Vuex Chapter 6The path to the data is quite long and can make our code unreadable. To make it easier to
understand, assign the data to a variable, which allows us to check whether it exists and
returns the data with cleaner, smaller, and less repeatable code. It also means we only have
to update one line if the path to our data changes:
getFolderStructure() {
let data = this.$store.state.structure[this.slug];
if(data) {
this.createFolderStructure(data);
} else {
this.dropbox().filesListFolder({
path: this.path,
include_media_info: true
})
.then(this.createFolderStructure)
.catch(error => {
this.isLoading = 'error';
console.log(error);
});
}
}Only storing new data
As mentioned earlier, the current createFolderStructure method both displays the
structure and caches the response in the store, thus re-saving the structure even when the
data is loaded from the cache.
Create a new method that the Dropbox API will fire once the data has loaded. Call
it createStructureAndSave. This should accept the response variable as its only
parameter:
createStructureAndSave(response) {
}We can now move the store commit function from the createFolderStructure method
into this new one, along with a call to fire the existing method with the data:
createStructureAndSave(response) {
this.createFolderStructure(response)
this.$store.commit('structure', {
path: this.slug,
data: response
});
}