<p>상태, 변경 사항, getter 등이 포함된 저장소가 있습니다. 상태에는 다음 작업 목록이 포함됩니다. </p> <pre class="brush:php;toolbar:false;">const state = { 작업:[{ 제목: "일어나라", 완료: 거짓 }, { 제목: "프로젝트 2", 완료: 거짓 }, ] }</pre> <p><code>Todo.vue</code></p> <pre class="brush:php;toolbar:false;"><템플릿> <Task v-for="(task,key) in task" :id="key" :task="task" :key="key" /> </템플릿> <스크립트> 'vue'에서 {defineComponent }를 가져옵니다. '../comComponents/Task.vue'에서 작업 가져오기 'vuex'에서 {mapGetters} 가져오기 기본 정의 내보내기({ 이름: '페이지인덱스', 구성요소:{ 일 }, 계산됨:{ ...mapGetters('task', ['tasks']) //작업 모듈에서 작업 가져오기 }, }) <p><code>task.vue</code></p> <pre class="brush:php;toolbar:false;"><템플릿> <q-항목 클릭 가능 :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'" V-리플> <q-item-섹션 측면 상단> <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> </템플릿> <스크립트> 'vuex'에서 {mapActions} 가져오기 기본값 내보내기 { props: ["작업"], } <p>위 코드에서 Task.vue</p> <pre class="brush:php;toolbar:false;"><q-checkbox v-model="task.completed"</pre> <p>문제는 이 줄에 있습니다. 위에 제공된 코드에서 <code>v-model="task.completed"</code>를 제거하면 모든 것이 잘 작동합니다. 그렇지 않으면 <code>Unexpected mutation of "task" prop< /코드></p>