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

state.structure[payload.path] = payload.data;

}

}

});

Next, move the code from the breadcrumb component into the updateHash mutation so

we can update both the path and breadcrumb variables:

updateHash(state) {

let hash = window.location.hash.substring(1);

state.path = (hash || '');

let output = [],

slug = '',

parts = state.path.split('/');

for (let item of parts) {

slug += item;

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

slug += '/';

}

state.breadcrumb = output;

},

Note that rather than returning the output array, it is getting stored in the state object.

We can now update the folder's computed function on the breadcrumb component to

return the store data:

computed: {

folders() {

return this.$store.state.breadcrumb;

}

}

With the data now available globally, we can create a new method on the dropbox-viewer

component, cacheParentFolders, which triggers the code we wrote for the breadcrumb

component.

Create a new method on the Dropbox component and move your code to it. Update the

location of the parents and ensure you are firing the correct path:

cacheParentFolders() {

let parents = this.$store.state.breadcrumb;

parents.reverse().shift();