Pre-Caching Other Folders and Files for Faster Navigation Chapter 7Every time a file is displayed, a new component gets initialized using data from the store.
We can use this to our advantage as it means we only need to update the component
instance and then the result gets cached.
In your file component, update the API response to not only save the result on the link
property of the data attribute but the on the file instance, f, as well. This will be stored as a
new key, download_link.
When storing the data, rather than having two separate commands, we can combine them
into one with two equal signs:
Vue.component('file', {
template: '<li><strong>{{ f.name }}</strong><span v-if="f.size"> - {{
bytesToSize(f.size) }}</span> - <a v-if="link"
:href="link">Download</a></li>',
props: {
f: Object,
d: Object
},
data() {
return {
byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],
link: false
}
},
methods: {
bytesToSize(bytes) {
// Set a default
let output = '0 Byte';
// If the bytes are bigger than 0
if (bytes > 0) {
// Divide by 1024 and make an int
let i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
// Round to 2 decimal places and select the appropriate unit from
the array
output = Math.round(bytes / Math.pow(1024, i), 2) + ' ' +
this.byteSizes[i];
}
return output
}
},
created() {
this.d.filesGetTemporaryLink({path: this.f.path_lower})
.then(data => {