Caching the Current Folder Structure Using Vuex Chapter 6Lastly, update the Dropbox API function to call this method:
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.createStructureAndSave)
.catch(error => {
this.isLoading = 'error';
console.log(error);
});
}},Open your app in the browser and navigate through the folders. When you navigate back
up using the breadcrumb, the response should be a lot quicker—as it is now loading from
the cache you've created instead of querying the API every time.
In Chapter 7, Pre-Caching Other Folders and Files for Faster Navigation, we will be looking at
precaching the folders to try and preempt where the user is heading next. We will also look
at caching the download links for the files.
Our full app JavaScript should now look like:
Vue.component('breadcrumb', {
template: '<div>' +
'<span v-for="(f, i) in folders">' +
'<a :href="f.path">[F] {{ f.name }}</a>' +
'<i v-if="i !== (folders.length - 1)"> » </i>' +
'</span>' +
'</div>',
computed: {
folders() {
let output = [],
slug = '',
parts = this.$store.state.path.split('/');
for (let item of parts) {
slug += item;
output.push({'name': item || 'home', 'path': '#' + slug});
slug += '/';
}