vuejs（待办事项列表应用程序）中（任务）道具的意外突变

Posted 2023-03-16

【中文标题】vuejs（待办事项列表应用程序）中（任务）道具的意外突变

【英文标题】：Unexpected mutation of (task) prop in vuejs (todolist list app )

【发布时间】：2021-11-26 13:24:22

【问题描述】：

我有包含状态、突变、getter 等的存储。状态包含如下给出的任务列表。

const state = 
   tasks:[
     title: "Wake up",
     completed: false
   ,
   
     title: "Item 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']) //fetched tasks from task module
  ,
)
</script>

Task.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" />  /////////////// problem is in this line
        </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

【参考方案1】：

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

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

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

然后你可以在你的模板中使用这个突变

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

另请注意，q-checkbox 组件的实际道具和事件名称可能会有所不同，具体取决于您的实现

【讨论】：

在同步状态时我遇到了另一个错误。你能弄清楚问题是什么吗？ ***.com/questions/69478690/…