Pre-Caching Other Folders and Files for Faster Navigation Chapter 7Before we start the caching process, we need to update the folders computed function
within the component. This is because currently, we store the path with the hash
prepended, which creates an invalid path for the Dropbox API. Remove the hash from the
object being pushed to the output array and add it in the template, in a similar fashion to
the folder component:
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() {
let output = [],
slug = '',
parts = this.$store.state.path.split('/');
for (let item of parts) {
slug += item;
output.push({'name': item || 'home', 'path': slug});
slug += '/';
}return output;
}
}
});We can now use the output for both displaying the breadcrumb and caching the parent
structure.
The first step is to allow the breadcrumb component access to the caching function. In a
similar fashion to the folder component, add the function as a prop to the breadcrumb
component in your View:
<breadcrumb :cache="getFolderStructure"></breadcrumb>Add the props object to the component in the JavaScript code. Declare the cache prop as a
function so Vue knows what to expect:
Vue.component('breadcrumb', {
template: '...',
props: {
cache: Function
},
computed: {