In my Vue application, I have a global store structured as follows:
// Note: These Stores Are Modularised, please refer to: [https://vuex.vuejs.org/guide/modules.html] for more information.
const store = new Vuex.Store({
modules: {
surfers: surfers,
surfSites: surfSites,
surfTickets: surfTickets
},
actions: {
resetAllState: ({ dispatch, modules }) => {
console.log(modules); // Undefined
console.log(store.modules); // Undefined
console.log(this.modules); // Error in v-on handler: "TypeError: _this is undefined"
for (const currentModule in modules) {
console.log(`Resetting Module State: ${module}`);
if (modules[currentModule].state.hasOwnProperty("initialState")) {
dispatch("resetModuleState", currentModule);
}
}
},
resetModuleState: (currentModule) => {
console.log(`Resetting Module State: ${currentModule}`);
}
}
});
The purpose of these actions is to loop through the modules and trigger a reset state action when a user logs out.
However, I am facing issues where modules, store.modules, and this.modules are all either undefined or causing an error related to being undefined...
Can anyone provide guidance on how to dynamically access modules in this manner, if possible?