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

When caching the data in Chapter 6, Caching the Current Folder Structure Using Vuex, we

were using the slug as the key in the store. The slug was generated by using the current

path; however, we cannot use this in the new methods as it is fixed to its current location.

Create a new method called generateSlug. This will accept one parameter, the path, and

return a converted string using the replacements from the slug-computed function:

generateSlug(path) {

return path.toLowerCase()

.replace(/^\/|\/$/g, '')

.replace(/ /g,'-')

.replace(/\//g,'-')

.replace(/[-]+/g, '-')

.replace(/[^\w-]+/g,'');

}

We can now delete the computed slug function, so we don't have any repeating code.

Going back to our getFolderStructure method, create a new variable that stores the slug

version of the path using the new method. For this, we are going to use const to create a

variable that cannot be changed:

getFolderStructure(path) {

let output;

const slug = this.generateSlug(path);

return output;

}

The last variable we will create is the data path, as we did in Chapter 8, Introducing Vue-

Router and Loading URL-Based Components. This will use the new slug variable we've just

created:

getFolderStructure(path) {

let output;

const slug = this.generateSlug(path),

data = this.$store.state.structure[slug];

return output;

}