Vue.js 为什么我的组件在没有刷新页面的情况下不更新？

我正在VueJS中编写一个Todo应用程序，包含两个组件

NewTask

和

TodoList

新任务：

<template>
         <!-- New Task -->
         <div class="flex flex-col"> 
           <div class="flex-col">
              <textarea class="resize-none rounded-md font-sans font-bold p-4 focus:outline-none border" v-model="task" placeholder="Task" cols="40" rows="2"></textarea>
           </div>
           <div class="flex-col py-2">
              <button @click="AddTask(task)" class="py-4 px-20 focus:outline-none  bg-blue-200 rounded-full">Add</button>
           </div>
         </div>
        
         <!-- End Component -->
</template>

<script>
export default {
    name:"NewTask",
    data(){
       return{
         task: ''
       }
    },
    methods:{
       async AddTask(task){
          await this.$store.dispatch("SAVE_TASK",task)
          this.task = ''          
       }
    }
    
}
</script>

---

在不刷新页面的情况下更新时，我缺少/忘记了什么？

在您的NewTask组件中，在add task方法中执行以下操作

await this.$store.dispatch("SAVE_TASK",task).then((response)=>{
this.$store.dispatch("GET_TASK")
this.task = '' 
 }).catch(error=>{
console.log(error)
})
     

---

这是有效的，有一种方法可以省略“响应”吗？我调用了

console.log（response）

当我使用

时，我没有得到你的消息。然后（response=>{…}）

如果我没有声明response，我会收到一个错误，我所做的就是在console.log中使用它

export default new Vuex.Store({
    state: {
        task: [],
        message: []
    },

    mutations: {
        SET_TASK: function(state, task) {
            state.task = task
        },
        SET_MESSAGE: function(state, message) {
            state.message = message
        }
    },

    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)
        }
    }
})

await this.$store.dispatch("SAVE_TASK",task).then((response)=>{
this.$store.dispatch("GET_TASK")
this.task = '' 
 }).catch(error=>{
console.log(error)
})