Vuex 배열 항목 부울 값 전환

Vuex 배열 항목 부울 값 전환

어떤 이유로 인해 Vuex 상태 배열에서 항목의 확인란을 전환할 수 있는 작동 솔루션을 찾을 수 없습니다.작업 항목을 표시할 수 있을 정도로 작동하게 되었습니다. 하지만 토글 변환을 커밋하고 호출하려고 할 때마다 예상대로 작동하지 않고 아무것도 바뀌지 않습니다.done =을 true로 설정하면 작동하지만 전환하지는 않습니다.감 잡히는 게 없어요?

보기:

<template>
  <div class="todos">
    <ul>
      <li v-for="todo in $store.state.todos" :key="todo.id">
        <input
          type="checkbox"
          v-model="todo.done"
          @change="$store.commit('toggle', todo.id)"
        />
        <h3>{{ todo.title }}</h3>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({});
</script>

<style></style>

상태:

import { createStore } from 'vuex';
import Todo from '@/types/Todo';
import { State } from 'vue';

const store = createStore({
  state() {
    return {
      todos: [] as Todo[],
    };
  },
  mutations: {
    add(state: State, todo: Todo) {
      state.todos.push(todo);
    },
    toggle(state: State, todoId: number) {
      const index = state.todos.findIndex((todo) => todo.id === todoId);
      state.todos[index].done = !state.todos[index].done;
    },
  },
});

export default store;

다음을 복제하여 Todos 어레이의 메모리 참조를 업데이트합니다.state.todos배열 및 작업관리 개체의 구성을 해제합니다.

state.todos = state.todos.map((todo) => ({...todo, done: todoId === todo.id ? !todo.done : todo.done }));

언급URL : https://stackoverflow.com/questions/73005228/vuex-toggle-array-item-boolean-value