Caching the Current Folder Structure Using Vuex Chapter 6Loading data from the store if it exists
Loading our data from the store requires a couple of changes to our code. The first step is to
check whether the structure exists in the store and if it does, load it. The second step is to
only commit the data to storage if it is new data—calling the
existing createFolderStructure method will update the structure but also re-commit
the data to storage. Although not detrimental to the user as it currently stands,
unnecessarily writing data to the store could cause issues when your app grows. This will
also help us when we come to precaching the folders and files.
Loading the data from the store
As a store is a JavaScript object and our slug variable is a consistent computed value on
our component, we can check whether the object key exists with an if statement:
if(this.$store.state.structure[this.slug]) {
// The data exists
}This gives us the flexibility to load the data from the store if it exists, using the
createFolderStructure method and, if not, trigger the Dropbox API call.
Update the getFolderStructure method to include the if statement and add the
method call if the data exists:
getFolderStructure() {
if(this.$store.state.structure[this.slug]) {
this.createFolderStructure(this.$store.state.structure[this.slug]);
} else {
this.dropbox().filesListFolder({
path: this.path,
include_media_info: true
})
.then(this.createFolderStructure)
.catch(error => {
this.isLoading = 'error';
console.log(error);
});
}
}