第十五篇：Vue2 项目实战

第十五篇：Vue2 项目实战

1. 项目规划

需求分析（以 TODO 列表应用为例）

1. 核心功能：
   • 任务创建：用户能够输入任务内容，并添加到 TODO 列表中。
   • 任务列表展示：以列表形式展示所有已创建的任务，每个任务应显示任务内容、完成状态（已完成/未完成）。
   • 任务状态切换：用户可以切换任务的完成状态，已完成的任务可以标记为未完成，反之亦然。
   • 任务删除：用户可以删除不再需要的任务。
2. 辅助功能：
   • 任务过滤：提供筛选功能，例如只显示已完成任务、只显示未完成任务或显示所有任务。
   • 任务排序：支持按任务创建时间、任务完成状态等条件对任务列表进行排序。

架构设计

1. 组件划分：
   • TodoInput 组件：负责接收用户输入的任务内容，并触发任务创建操作。
   • TodoList 组件：展示任务列表，包含多个 TodoItem 组件。
   • TodoItem 组件：代表单个任务，展示任务内容、完成状态，并提供切换完成状态和删除任务的功能。
   • Filter 组件：实现任务过滤功能，提供不同的过滤选项。
   • Sort 组件：实现任务排序功能，提供不同的排序选项。
2. 路由规划：
   • 由于 TODO 列表应用相对简单，可能不需要复杂的路由结构。但如果考虑未来扩展，例如添加任务详情页面等，可以设置如下路由：
     • 首页：/，展示 TODO 列表，包含任务创建、展示、过滤、排序等功能。
     • 任务详情页：/task/:id，通过任务 ID 展示单个任务的详细信息（可在后续扩展中实现）。
3. 状态管理设计：
   • 使用 Vuex 管理共享状态：
     • state：存储任务列表数据 tasks，以及当前的过滤条件 filter 和排序条件 sort。
     • mutations：提供添加任务（ADD_TASK）、切换任务完成状态（TOGGLE_TASK_STATUS）、删除任务（DELETE_TASK）、更新过滤条件（UPDATE_FILTER）、更新排序条件（UPDATE_SORT）等方法来修改 state。
     • actions：处理异步操作，例如从本地存储加载任务数据（LOAD_TASKS_FROM_LOCAL_STORAGE），将任务数据保存到本地存储（SAVE_TASKS_TO_LOCAL_STORAGE）。
     • getters：根据当前的过滤和排序条件，从 tasks 中派生出需要展示的任务列表（filteredAndSortedTasks）。

2. 项目开发

组件构建

1. TodoInput 组件：

<template>
  <div>
    <input v-model="newTask" placeholder="输入新任务">
    <button @click="addTask">添加任务button>
  div>
template>

<script>
export default {
     
  data() {
     
    return {
     
      newTask: ''
    };
  },
  methods: {
     
    addTask() {
     
      if (this.newTask.trim()!== '') {
     
        this.$store.commit('ADD_TASK', {
     
          id: new Date().getTime(),
          content: this.newTask,
          completed: false
        });
        this.newTask = '';
      }
    }
  }
};
script>

2. TodoList 组件：

<template>
  <div>
    <todo-item v-for="task in filteredAndSortedTasks" :key="task.id" :task="task">todo-item>
    <filter>filter>
    <sort>sort>
  div>
template>

<script>
import TodoItem from './TodoItem.vue';
import Filter from './Filter.vue';
import Sort from './Sort.vue';
import {
      mapGetters } from 'vuex';

export default {
     
  components: {
     
    TodoItem,
    Filter,
    Sort
  },
  computed: {
     
  ...mapGetters(['filteredAndSortedTasks'])
  }
};
script>

3. TodoItem 组件：

<template>
  <div>
    <input type="checkbox"