Caching the Current Folder Structure Using Vuex Chapter 6This would become the following:
updateStructure() {
this.isLoading = true;
this.getFolderStructure();
}We do, however, still need to store the path as a variable on this component. This is due to
our watch method, which calls the updateStructure function. To do this, we need to
store our path as a computed value, rather than a fixed variable. This is so it can
dynamically update when the store updates, rather than a fixed value when the
component gets initialized.
Create a computed object on the dropbox-viewer component with a method called
path—this should just return the store path:
computed: {
path() {
return this.$store.state.path
}
}We now have it as a local variable, so the Dropbox filesListFolder method can be
updated to once again use this.path.
The newly-updated dropbox-viewer component should look like the following. Viewing
the app in your browser, it should appear as though nothing has changed—however, the
inner workings of the app are now reliant on the new Vuex store, rather than a variable
stored on the Vue instance:
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
data() {
return {
accessToken: 'XXXX',
structure: {},
isLoading: true
}
},
computed: {
path() {
return this.$store.state.path
}
},
methods: {
dropbox() {