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

The path object will consist of a path variable, plus the data returned from the API. For

example:

{

path: 'images-holiday',

data: [{...}]

}

With this object being passed in, we can use the path as the key and the data as the value.

Store the data with a key of the path inside the mutation:

structure(state, payload) {

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

}

We can now commit this data at the end of our new createFolderStructure method in

our component:

createFolderStructure(response) {

const structure = {

folders: [],

files: []

}

for (let entry of response.entries) {

// Check ".tag" prop for type

if(entry['.tag'] == 'folder') {

structure.folders.push(entry);

} else {

structure.files.push(entry);

}

}

this.structure = structure;

this.isLoading = false;

this.$store.commit('structure', {

path: this.path,

data: response

});

}

This will now store each folder's data when navigating through the app. This can be

verified by adding a console.log(state.structure) inside the structure mutation.