My component is not reacting to Vuex store changes when I edit an existing element, even though it works fine when adding a new element. After hours of debugging and trying everything, I've realized that it might have something to do with deep watching the store changes.
For example, when I add an element to currentVisit.pathologies like {id:1,title:"Something"}, it works fine. But when I try to edit an element, my component does not react to the store update.
UPDATED
addPathology: (state, payload) => {
state.currentVisit.pathologies.push(payload);
},
updatePathology: (state, payload) => {
//This condensed code snippet highlights the issue with my component not reacting.
state.currentVisit.pathologies[0] = payload;
}
state{
currentVisit: {
id: "5",
tumors: null,
pathologies: [],
examinations: null,
allergies: null,
diagnoses: null,
comorbidities: null,
chemotherapies: null,
radiations: null,
immunotherapies: null,
operations: null
}
}
createPathology: ({ commit, getters }, payload) => {
return new Promise((resolve, reject) => {
//do axios
//then commit updatePathologies
//then return promise response
baseAxios
.post("visits/" + getters.visitId + "/pathologies", payload)
.then(res => {
commit("addPathology", res.data.data);
resolve(res);
})
.catch(e => {
reject(e);
});
});
}
editPathology: ({ commit, getters }, payload) => {
return new Promise((resolve, reject) => {
baseAxios
.patch(
"visits/" + getters.visitId + "/pathologies/" + payload.id,
payload
)
.then(res => {
//commit("updatePathology", res.data.data);
resolve(res);
})
.catch(e => {
reject(e);
});
});
}