Caching the Current Folder Structure Using Vuex Chapter 6.then(this.createFolderStructure)
.catch(error => {
this.isLoading = 'error';
console.log(error);
});
}Using promises, we can use createFolderStructure as the action for the API call.
The next step is to store the data we are processing. To do this, we are going to take
advantage of the ability to pass an object to the commit function of the store and use the
path as the key in the storage object. Rather than nest the file structures, we are going to
store the information in a flat structure. For example, after we've navigated through a few
folders, our store would look like this:
structure: {
'images': [{...}],
'images-holiday': [{...}],
'images-holiday-summer': [{...}]
}There will be several transformations made to the path to make it object key-friendly. It will
be lowercased and any punctuation will be removed. We will also replace all spaces and
slashes with hyphens.
To begin, create an empty object in the Vuex store state object titled structure; this is
where we are going to store the data:
state: {
path: '',
structure: {}
}We now need to create a new mutation, to allow us to store the data as we load it. Create a
new function inside the mutations object. Call it structure; it needs to accept the state
as a parameter, plus a payload variable which will be an object passed in:
structure(state, payload) {
}