vue3.0实现待办事项案例

在Vue 3.0中实现待办事项案例通常涉及到组件化开发和状态管理。以下是一个简单的例子，展示如何使用Vuex作为状态管理库和Vue CLI创建一个待办事项列表应用：

1. **安装依赖**:
首先，确保已经安装了Vue CLI以及相关的依赖，如Vuex、vue-router等。运行`npm install vue@next vuex vue-router axios`

2. **创建组件**:
- `TodoItem.vue`: 单个待办事项组件，包含输入框和删除按钮。
- `TodoList.vue`: 主要显示所有待办事项并允许添加新项。

<!-- TodoItem.vue -->
<template>
  <div>
    <input type="text" v-model="taskText">
    <button @click="deleteTask">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskText: "",
    };
  },
  methods: {
    deleteTask() {
      this.$store.dispatch("deleteTask", this.taskText);
    }
  }
};
</script>

3. **Vuex store** (`store/index.js`):
- 创建actions和mutations处理添加和删除任务。

import { createStore } from 'vuex';

const store = createStore({
  state: {
    todos: [],
  },
  mutations: {
    addTask(state, task) {
      state.todos.push(task);
    },
    removeTask(state, task) {
      const index = state.todos.findIndex(t => t === task);
      if (index > -1) {
        state.todos.splice(index, 1);
      }
    },
  },
  actions: {
    async addTask({ commit }, task) {
      await dispatch("saveTask", task);
      commit("addTask", task);
    },
    async deleteTask({ commit }, task) {
      await dispatch("removeTask", task);
      commit("removeTask", task);
    },
  },
  // ...其他可能的state和actions
});

export default store;

4. **`App.vue` 或 `main.js` 中的路由配置**:
添加路由以便在不同的页面之间切换。

5. **`TodoList.vue` 组件**:
渲染每个任务并监听Vuex的状态变化。

<template>
  <div>
    <ul>
      <li v-for="(task, index) in todos" :key="index">
        {{ task }}
        <TodoItem :task-text="task" @delete-task="deleteTaskFromStore"></TodoItem>
      </li>
    </ul>
    <button @click="addNewTask">添加任务</button>
  </div>
</template>

<script>
import TodoItem from "@/components/TodoItem";
import { mapState } from "vuex";

export default {
  components: {
    TodoItem,
  },
  computed: {
    ...mapState(["todos"]),
  },
  methods: {
    addNewTask() {
      this.$store.dispatch("addTask", this.newTaskText);
      this.newTaskText = "";
    },
    deleteTaskFromStore(task) {
      this.$store.dispatch("deleteTask", task);
    },
  },
  data() {
    return {
      newTaskText: "",
    };
  },
};
</script>

以上就是一个基础的Vue 3.0待办事项列表示例。你可以通过这个结构扩展功能，比如使用自定义事件或者更复杂的UI设计。