Vue/todos/src/App.vue

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },

  data() {
    return {
      // 从 localStorage 初始化
      todos: JSON.parse(localStorage.getItem("vue-todos") || "[]"),
      tabType: 0, // 0全部 1未完成 2已完成
    };
  },

  computed: {
    // 筛选后的列表
    todoList() {
      if (this.tabType === 0) return this.todos;
      const type = this.tabType;
      return this.todos.filter((item) => {
        if (type === 1) return !item.completed;
        return item.completed;
      });
    },
  },

  methods: {
    // 添加待办
    addTodo(newTodo) {
      this.todos.push({
        id: Date.now(),
        txt: newTodo,
        completed: false,
      });
    },

    // 删除待办
    delTodo(item) {
      this.todos = this.todos.filter((t) => t.id !== item.id);
    },

    changeTabType(type) {
      this.tabType = type;
    },
  },

  // 深度监听 — 自动写入 localStorage
  watch: {
    todos: {
      handler(todos) {
        localStorage.setItem("vue-todos", JSON.stringify(todos));
      },
      deep: true,
    },
  },
};
</script>

<template>
  <TodoHeader @addTodo="addTodo" />
  <TodoList :todos="todoList" @delTodo="delTodo" />
  <TodoFooter
    :count="todoList.length"
    :tabType="tabType"
    @changeTabType="changeTabType"
  />
</template>