阶段案例——待办事项vue3 代码

在Vue3中，我们可以创建一个简单的待办事项管理应用作为阶段案例。这个例子通常包含组件化的设计，Vuex状态管理，以及事件总线的运用。以下是基本的代码框架：

首先，创建一个`TodoItem.vue`组件表示单个待办事项：

<template>
  <div class="todo-item">
    <input type="text" v-model="title" @input="updateTitle">
    <button @click="toggleCompleted">已完成</button>
    {{ completed ? '已' : '' }}完成
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      completed: false,
    };
  },
  methods: {
    updateTitle(e) {
      this.title = e.target.value;
    },
    toggleCompleted() {
      this.completed = !this.completed;
    },
  },
};
</script>

接着，使用Vuex来管理全局的状态，比如待办事项列表：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    todos: [],
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    completeTodo(state, index) {
      state.todos[index].completed = true;
    },
  },
});

// 然后在父组件中导入并使用store
export default {
  setup() {
    const { addTodo, completeTodo } = store.mapActions(['addTodo', 'completeTodo']);
    
    //...
  },
};

最后，使用事件总线来处理全局的行为，例如删除待办事项：

// eventBus.js
import Vue from 'vue';
const eventBus = new Vue();

eventBus.$on('deleteTodo', (index) => {
  // 删除相应的待办事项
  store.commit('removeTodo', index);
});

// 在组件里触发删除事件
methods: {
  deleteTodo(index) {
    eventBus.$emit('deleteTodo', index);
  }
}