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

for(let parent of parents) {

this.getFolderStructure(parent.path);

}

}

We can now fire this method once when the Dropbox component gets created. Add it after

the existing method call in the created function:

created() {

this.displayFolderStructure();

this.cacheParentFolders();

}

We can now do some housekeeping and delete the mounted method from the breadcrumb

component, along with the props object and the :cache prop from the view. This means

our breadcrumb component is now simpler than it was before:

Vue.component('breadcrumb', {

template: '<div>' +

'<span v-for="(f, i) in folders">' +

'<a :href="\'#\' + f.path">{{ f.name || 'Home' }}</a>' +

'<i v-if="i !== (folders.length - 1)"> » </i>' +

'</span>' +

'</div>',

computed: {

folders() {

return this.$store.state.breadcrumb;

}

}

});

The HTML returns to what it was:

<breadcrumb></breadcrumb>

We can also tidy up the updateHash mutation in the store to be a bit neater and more

understandable:

updateHash(state, val) {

let path = (window.location.hash.substring(1) || ''),

breadcrumb = [],

slug = '',

parts = path.split('/');

for (let item of parts) {

slug += item;

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

slug += '/';