如何切换已完成的待办事项选项？

Question

我期待单击“完成/撤消”单个任务按钮以使用 Vuex 存储操作将已完成的任务数据切换为相反。但是我收到 404 错误。即使我从子组件传递任务 ID。或者我应该用突变来做吗？

https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=store%2Findex.js,components%2FTask.vue

// Child component

<template>
  <div :class="{ task: task.completed }">
    <p class="content">
      {{ task.todo }}
    </p>
      <button @click="toggleTask">
        {{ task.completed ? 'Undone' : 'Done' }}
      </button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ['task'],
  methods: {
    toggleTask(id) {
      this.$store.dispatch('toggleTask', id);
    },
  },
};
</script>

// Parent component

<template>
      <Task v-for="task in tasks" :key="task.id" :task="task" />
</template>

<script>
export default {
  data() {
    return {
      todo: '',
      completed: false,
      search: '',
    };
  },
  computed: {
    tasks() {
      return this.$store.getters.getTasks(this.search);
    },
  },
  mounted() {
    this.$store.dispatch('getTasks').then((data) => console.log(this.tasks));
  },
};
</script>

// Store 

export const state = () => ({
  tasks: [],
});

export const actions = {
  async getTasks(context) {
    const res = await fetch('https://dummyjson.com/todos/user/5');
    if (res.ok) {
      let result = await res.json();
      context.commit('setTasks', result.todos);
    }
    return res.ok;
  },
  async toggleTask(context, id) {
    const res = await fetch(`https://dummyjson.com/todos/${id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      // body: JSON.stringify(data),
    });
    if (res.ok) {
      const tasks = (context.state.tasks.find(
        (task) => task.id === id
      ).completed = !completed);
      context.commit('setTask', id);  // or should I commit to toggle task mutation and how can I do it ?
    }
    return res.ok;
  },
};

export const mutations = {
  setTasks(state, data) {
    state.tasks = data;
  },
  toggleTask(state, id) {
    state.tasks.find((task) => task.id === id).completed = !completed;
  },
};

export const getters = {
  },
};

Answer 1

在点击处理程序中

 toggleTask(id) {
  this.$store.dispatch('toggleTask', id);
 },

id 是一个事件对象。您需要在此处正确传递 id。下面应该工作

this.$store.dispatch('toggleTask', this.task.id);

Answer 2

首先，您将

task

传递给方法：

<button @click="toggleTask(task)">
  {{ task.completed ? 'Undone' : 'Done' }}
</button>

然后在 Vuex 中创建将放置数据并提交突变的操作：

async toggleTask(context, task) {
  const res = await fetch(`https://dummyjson.com/todos/${task.id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
    },
    body: JSON.stringify({completed: !task.completed}),
  })
  let result = await res.json();
  context.commit('updateTask', result)
},

末尾突变：

updateTask(state, task) {
  state.tasks = [
    ...state.tasks.map(item => 
      item.id !== task.id ? item : {...item, ...task}
    )
  ] 
},