Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Caching the Current Folder Structure Using Vuex Chapter 6

When referring to the Vuex store on a Vue instance, it is saved under the variable as

$store, regardless of the variable name it was initially declared against:

const app = new Vue({

el: '#app',

store,

created() {

store.commit('updateHash');

}

});

window.onhashchange = () => {

app.$store.commit('updateHash');

}

Using the path variable

We now need to update the components to use the path from the store, rather than one

passed down through components. Both breadcrumb and dropbox-viewer need to be

updated to accept this new variable. We can also remove unnecessary props from the
components.

Updating the breadcrumb component

From the HTML, remove the :p prop, leaving a simple breadcrumb HTML tag:

<breadcrumb></breadcrumb>

Next, remove the props object from the component in the JavaScript file. The parts

variable will also need to be updated to use this.$store.state.path, instead of

this.p:

Vue.component('breadcrumb', {

template: '<div>' +

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

'<a :href="f.path">[F] {{ f.name }}</a>' +

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

'</span>' +

'</div>',

computed: {

folders() {

let output = [],

slug = '',