Caching the Current Folder Structure Using Vuex Chapter 6Caching the folder contents
Now that we have Vuex in our app and are utilizing it for the path, we can begin to look at
storing the contents of the currently-displayed folder so that if the user returns to the same
place, the API does not need to be queried to retrieve the results. We are going to do this by
storing the object returned by the API the Vuex store.
When the folder gets requested, the app will check whether the data exists in the store. If it
does, the API call will be omitted and the data loaded from the storage. If it doesn't exist,
the API will be queried and the results saved in the Vuex store.
The first step is to separate out the data processing into its own method. This is because the
files and folders are going to need to be split regardless of whether the data comes from the
store or API.
Create a new method in the dropbox-viewer component titled
createFolderStructure() and move the code from inside the then() function,
following the Dropbox filesListFolder method. Call the new method inside this
function instead.
Your two methods should now look like the following, and your app should still be
working as it was before:
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;
},getFolderStructure() {
this.dropbox().filesListFolder({
path: this.path,
include_media_info: true
})