vue3-05删除任务

**Vue3 删除任务**

在 Vue3 中，删除任务是指从列表中移除一个已完成的任务。这个功能对于保持任务列表的整洁和有效性至关重要。

### **1. 创建任务列表组件**

首先，我们需要创建一个任务列表组件。我们将使用 `v-for` 指令来渲染每个任务，并使用 `v-if` 指令来控制任务是否显示。

html<template>
 <ul>
 <li v-for="(task, index) in tasks" :key="index">
 {{ task.name }}
 <button @click="deleteTask(index)">删除</button>
 </li>
 </ul>
</template>

<script>
export default {
 data() {
 return {
 tasks: [
 { name: '任务1', completed: false },
 { name: '任务2', completed: true },
 { name: '任务3', completed: false }
 ]
 }
 },
 methods: {
 deleteTask(index) {
 this.tasks.splice(index,1)
 }
 }
}
</script>

在上面的代码中，我们定义了一个 `tasks` 数组，包含三个任务。我们使用 `v-for` 指令来渲染每个任务，并使用 `button` 元素来触发删除任务的功能。

### **2. 删除任务逻辑**

当用户点击删除按钮时，我们需要从 `tasks` 数组中移除相应的任务。我们可以使用 `splice()` 方法来实现这一点。

javascriptdeleteTask(index) {
 this.tasks.splice(index,1)
}

在上面的代码中，我们传递了 `index` 和 `1` 作为参数给 `splice()` 方法。这意味着从数组中移除一个元素，位于指定的索引位置。

### **3. 使用 Vuex**

如果我们需要在多个组件之间共享任务列表，那么使用 Vuex 来管理状态将是一个更好的选择。我们可以创建一个 `tasks` 状态，并使用 `mutations` 来更新它。

javascriptconst store = createStore({
 state: {
 tasks: [
 { name: '任务1', completed: false },
 { name: '任务2', completed: true },
 { name: '任务3', completed: false }
 ]
 },
 mutations: {
 deleteTask(state, index) {
 state.tasks.splice(index,1)
 }
 }
})

在上面的代码中，我们创建了一个 `tasks` 状态，并定义了一个 `deleteTask` mutation。这个 mutation 可以被多个组件使用来更新任务列表。

### **4. 使用 Vue Router**

如果我们需要在不同的路由之间共享任务列表，那么使用 Vue Router 来管理路由将是一个更好的选择。我们可以创建一个 `tasks` 状态，并使用 `vuex` 插件来与 Vuex 集成。

javascriptconst router = createRouter({
 routes: [
 {
 path: '/',
 component: TaskList,
 meta: { tasks: store.state.tasks }
 },
 {
 path: '/task/:id',
 component: TaskDetail }
 ]
})

在上面的代码中，我们创建了一个路由配置，并定义了一个 `tasks` 元数据。这个元数据将被传递给 `TaskList` 组件。

### **5. 总结**

删除任务是 Vue3 中的一个基本功能。在本文中，我们学习了如何使用 `v-for` 指令和 `splice()` 方法来实现删除任务的逻辑。我们还学习了如何使用 Vuex 和 Vue Router 来管理状态和路由。通过这些示例代码，你应该能够在自己的项目中轻松地实现删除任务的功能。