问题

I'm expecting clicking the Done/Undone individual task button to toggle the task data completed to opposite using Vuex store actions. But I'm getting the 404 error. Even though I'm passing the task id from the child component. Or should I do it with mutations?

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
// 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 = {};

Please note that the code you provided seems to contain a couple of issues, such as the undefined variable completed in the toggleTask action and the incorrect usage of this.$store.commit in the action. You may need to revise the code accordingly for it to work as intended.

// 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 = {
},
};

答案1

得分: 0

在点击处理程序中

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

id 是一个事件对象。你需要正确传递 id。以下代码应该有效

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

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

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

答案2

得分: 0

Here is the translated code snippet:

首先，您将 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 }
    )
  ]
}

如果您需要进一步的帮助，请告诉我。

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

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}
)
] 
},