Is it possible to utilize Vuex mapActions from an external module imported into a component?
I am working on standardizing a set of functions in a vue.js web application. My goal is to import these functions into each component and pass necessary values for them to operate. I am using Vuex for state management. Currently, each component independently calls these functions when loaded, duplicating the process.
I aim to refactor this by consolidating all functions into one module and importing it into the components as needed. This module utilizes mapActions as part of its functionality. Below are snippets of code: Vue component, module script, and Vuex action:
Vue component:
// Calling the imported function
if (!this.queued){
timer.updatePage(this.pagination, this.orders);
}
Module script (advance.js):
import { mapActions } from 'vuex';
let currentComp = {
name: 'purchase',
date: null,
start: false
}
const timer = {
...mapActions(['currentComponent']),
updatePage(pagination, order) {
currentComp.name = 'nextComponent';
this.currentComponent(currentComp);
}
}
export default timer;
Vuex action code:
// Within the actions section:
currentComponent({
commit
}, comp) {
console.log(comp);
commit('setCurrentComponent', comp);
}
// Within the mutations section:
setCurrentComponent: (state, comp) => {
state.currentComponent = comp.name;
return state;
}
When running the component with the imported function, an error occurs:
vuex.esm.js?2f62:870 Uncaught TypeError: Cannot read property 'dispatch' of undefined
at Object.mappedAction [as currentComponent] (vuex.esm.js?2f62:870)
at eval (advance.js?935c:37)
Removing 'this' from 'this.currentComponent' results in another error:
advance.js?935c:37 Uncaught ReferenceError: currentComponent is not defined
at eval (advance.js?935c:37)
Thanks in advance for any advice or pointers.