Vue.js中的任务属性在待办事项列表应用程序中发生了意外变化

Question

我有一个包含状态、变化、获取器等的存储。状态包含以下任务列表。

const state = {
   tasks:[{
     title: "起床",
     completed: false
   },
   {
     title: "项目2",
     completed: false
   },
  ]
}

Todo.vue

<template>
   <Task v-for="(task,key) in tasks" :id="key" :task="task" :key="key" />
</template>
<script>
import { defineComponent } from 'vue';
import Task from '../components/Task.vue'
import {mapGetters} from 'vuex'

export default defineComponent({
  name: 'PageIndex',
  components:{
    Task
  },
  computed:{
    ...mapGetters('task', ['tasks']) //从task模块获取任务
  },
})
</script>

任务.vue

<template>
    <q-item  
        clickable 
        :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
        v-ripple>
        <q-item-section side top>
          <q-checkbox v-model="task.completed" />  /////////////// 问题出在这一行
        </q-item-section>

        <q-item-section>
          <q-item-label :class="{'text-strikethrough' : 
          task.completed}">{{task.name}}</q-item-label>
        </q-item-section>
      </q-item>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        props: ["task"],
    }
</script>

在上面的代码中，在Task.vue中

<q-checkbox v-model="task.completed" />

问题出在这一行。如果我从上面给出的代码中删除 v-model="task.completed"，那么一切都正常工作，否则会抛出错误，错误信息为 Unexpected mutation of "task" prop

Answer 1

问题是你试图在mutation之外改变一个prop和相应的vuex状态。将一个值传递给v-model指令将创建一个双向数据绑定。你的task prop引用了状态中的一个对象，当q-checkbox改变task.completed的值时，对象直接在状态中更新。相反，你应该创建一个mutation来更新你的任务：

export const mutations = {
  updateTask(state, payload){
    const task = state.tasks.find(t => t.id === payload.id);

    if(task) Object.assign(task, payload)
  }
}

然后你可以在模板中使用这个mutation

<q-checkbox :value="task.completed" @input="updateTask({id: task.id, completed: !task.completed})" />

还要注意，q-checkbox组件的实际prop和事件名称可能会有所不同，这取决于你的实现方式