I'm currently working on developing a Vue.js based application. Here's the scenario I'm facing: I have a component with a popup where users can create an 'expense' entry. Upon clicking the 'save' button, a function in the Vuex module is called to handle the API request for saving the entry. It looks something like this:
import { mapActions } from 'vuex';
export default {
name : 'CreateExpense',
data(){
return {
expense : {
expense : null,
amount : 0,
comment : null
}
}
},
methods : {
...mapActions(['addExpense']),
saveExpense(){
this.addExpense( this.expense );
}
}
}
In my Vuex module, I have defined the following actions:
const actions = {
addExpense({commit},expense){
axios.post( env.API_URL + 'save-expense',expense)
.then( response => commit('addExpense',expense) )
}
};
My issue lies in determining how to inform the component that the API call has been completed and the expense state object has been updated. This information is needed so that the component can then close the popup that was opened. Ideally, I would like the handling of .catch/.then functions to be done within the module itself, while the component focuses on closing the popup and displaying an alert message. Could someone please provide some guidance or direction on how to achieve this?