Saya mempunyai kedai yang mengandungi keadaan, perubahan, pengambil, dsb. Status mengandungi senarai tugasan berikut.
const state = { tugasan:[{ tajuk: "Bangun", selesai: palsu }, { tajuk: "Projek 2", selesai: palsu }, ] } Todo.vue
import { defineComponent } daripada 'vue'; import Task daripada '../components/Task.vue' import {mapGetters} daripada 'vuex' eksport lalai defineComponent({ nama: 'PageIndex', komponen:{ Tugasan }, dikira:{ ...mapGetters('tugas', ['tugas']) //Dapatkan tugasan daripada modul tugas }, })
task.vue
{{task.name}} import {mapActions} daripada 'vuex' eksport lalai { prop: ["tugas"], }
Dalam kod di atas, dalam Task.vue
Masalahnya ada di baris ini. Jika saya mengalih keluar v-model="task.completed"daripada kod yang diberikan di atas maka semuanya berfungsi dengan baik jika tidak, ia akan menimbulkan ralat dengan mesejMutasi "task" prop< /kod>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Masalahnya ialah anda cuba menukar prop dan keadaan vuex yang sepadan di luar mutasi. Apabila menghantar nilai kepada nilai
v-model指令将创建一个双向数据绑定。你的taskprop引用了状态中的一个对象，当q-checkbox改变task.completed, objek dikemas kini secara langsung dalam keadaan. Sebaliknya, anda harus membuat mutasi yang mengemas kini tugas anda:export const mutations = { updateTask(state, payload){ const task = state.tasks.find(t => t.id === payload.id); if(task) Object.assign(task, payload) } }Kemudian anda boleh menggunakan mutasi ini dalam templat anda
Juga ambil perhatian bahawa
q-checkboxnama prop dan acara sebenar bagi komponen mungkin berbeza bergantung pada cara anda melaksanakannya