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

Caching the Current Folder Structure Using Vuex Chapter 6

parts = this.$store.state.path.split('/');

for (let item of parts) {

slug += item;

output.push({'name': item || 'home', 'path': '#' + slug});

slug += '/';

}

return output;

}

}

});

Updating the dropbox-viewer component to work with Vuex

As with the breadcrumb component, the first step is to remove the HTML prop from the

view. This should simplify the view of your app even more and you should be left with a

handful of HTML tags:

<div id="app">

<dropbox-viewer></dropbox-viewer>

</div>

The next step is to clean up the JavaScript, removing any unnecessary function parameters.

Remove the props object from the dropbox-viewer component. Next, update

the filesListFolder Dropbox method located inside getFolderStructure to use the

store path, instead of using the path variable:

this.dropbox().filesListFolder({

path: this.$store.state.path,

include_media_info: true

})

As this method is now using the store, instead of a function parameter, we can remove the

variable from the method declaration itself, along with removing it from the

updateStructure method and from whenever these two functions get called. For

example:

updateStructure(path) {

this.isLoading = true;

this.getFolderStructure(path);

}