Why does delete method not updated the list? - mongodb

Question

Working Todo application using VueJS, Vuex and MongoDB, after delete a task my list does not updated without refresh page. I already add a dispatch GET_TASK in promise awaiting the list update, but it is not working, and seems which this promise even not execute.
<template>
<div class="flex-col mx-auto mt-10 min-w-max font-sans text-xl" style="width:512px">
<ul class="space-y-2">
<li class="flex justify-between px-4 min-h-full" v-for="task in tasks" :key="task.id">
{{task.task}}
<button #click="deletetodo(task._id)" class="text-xs border-2 px-4 focus:outline-none hover:bg-blue-200 hover:text-white rounded-full">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"ListToDo",
computed:{
tasks: function(){
return this.$store.state.task
}
},
methods:{
async getlisttodo(){
await this.$store.dispatch("GET_TASK")
},
async deletetodo(id){
await this.$store.dispatch("DELETE_TASK",{'id':id})
.then(response => {
this.$store.dispatch("GET_TASK")
console.log(response);
})
.catch(error => console.log(`DeleteTodo ${error}`))
}
},
mounted(){
this.getlisttodo()
}
}
</script>
Vuex:
actions: {
async GET_TASK({ commit }) {
const rawResponse = await fetch('http://localhost:3000/tasks')
const content = await rawResponse.json();
commit("SET_TASK", content)
},
async SAVE_TASK({ commit }, object) {
const rawResponse = await fetch('http://localhost:3000/save', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 'task': object })
});
const content = await rawResponse.json();
commit("SET_MESSAGE", content)
},
async DELETE_TASK({ commit }, obj) {
const id = obj['id']
const raw = await fetch(`http://localhost:3000/delete/${id}`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 'id': id })
});
const content = await raw.json();
commit("SET_MESSAGE", content)
}
}

Answer 1

Just skimming through it seems that you are awaiting an async method and also doing .then.
If you are awaiting a method, then the task will wait until it fullfills the promise before going to the next line.
(more info on async/await here)
Also I'm not sure if response is being returned when you are dispatching "DELETE_TASK". I see a "SET_MESSAGE" being called within that method. You can always check my console.logging.
if that's the case try changing delete todo method as follows
async deletetodo(id){
try{
let response = await this.$store.dispatch("DELETE_TASK",{'id':id});
this.$store.dispatch("GET_TASK");
console.log(response);
}
catch(error){
console.log(`DeleteTodo ${error}`)
}
}
Happy Coding!

Answer 2

I got to fix that by adding DELETE METHOD
vuex:
async DELETE_TASK({ commit }, obj) {
try {
const id = obj['id']
const raw = await fetch(`http://localhost:3000/delete/${id}`, {
method: 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 'id': id })
});
const content = await raw.json();
commit("SET_MESSAGE", content)
} catch (error) {
console.log(`DELETE_TASK ${error}`)
}
}
server.js
app.delete('/delete/:id', async(req, res) => {
try {
const id = req.body.id;
TodoTask.findByIdAndDelete(id, err => {
if (err) return res.send(500, err);
res.send({ 'status': 200, "mensagem": 'Tarefa deletada' })
})
} catch (error) {
console.log(`Error Delete ${error}`)
}
})
ListTodo.vue
methods:{
async deletetodo(id){
try{
await this.$store.dispatch("DELETE_TASK",{'id':id})
.then(response => {
this.$store.dispatch("GET_TASK");
console.log(response);
})
.catch(error => console.log(error))
}catch(error){
console.log(`DeleteTodo ${error}`);
}
}
}