搜索输入清空后如何重新渲染初始Todo数组？

问题根源 #

当前代码在搜索时直接修改了state.tasks，将其替换为过滤后的数组，导致原始任务数据被覆盖。清空搜索框时，已没有初始数据可以恢复，因此只能显示之前搜索的结果。

解决方案 #

核心思路是在Store中保存一份原始任务数据副本，所有搜索过滤操作都基于这份原始数据，避免覆盖初始列表。

1. 修改Store代码

export const state = () => ({
  tasks: [],
  originalTasks: [], // 新增：存储原始任务列表
});

export const actions = {
  async getTasks(context) {
    const res = await fetch('https://dummyjson.com/todos/user/5');
    if (res.ok) {
      let result = await res.json();
      context.commit('setTasks', result.todos);
    }
    return res.ok;
  },
};

export const mutations = {
  setTasks(state, data) {
    state.tasks = data;
    state.originalTasks = [...data]; // 同时保存原始数据副本
  },
  searchTask(state, search) {
    const trimmedSearch = search.trim();
    if (trimmedSearch) {
      // 基于原始数据过滤，不修改原始数据
      state.tasks = state.originalTasks.filter(t => 
        t.todo.toLowerCase().includes(trimmedSearch.toLowerCase())
      );
    } else {
      // 清空搜索时，重置为原始任务列表
      state.tasks = [...state.originalTasks];
    }
  },
};

export const getters = {
  getTasks(state) {
    return state.tasks;
  },
};

2. 补全组件缺失的search数据声明

组件中使用了v-model="search"但未在data中声明，需要补上：

<template>
  <input
    type="text"
    v-model="search"
    @keypress.enter="searchTask"
    placeholder="search task"
  />
  <button @click="searchTask" class="btn">Search</button>
  <Task v-for="task in tasks" :key="task.id" :task="task" />
</template>

<script>
export default {
  data() {
    return {
      search: '' // 补上缺失的search变量
    };
  },
  computed: {
    tasks() {
      return this.$store.getters.getTasks;
    },
  },
  mounted() {
    this.$store.dispatch('getTasks');
  },
  methods: {
    searchTask() {
      this.$store.commit('searchTask', this.search);
    },
  },
};
</script>

额外优化（可选） #

如果想要实现实时搜索（输入时自动过滤，无需点击按钮），可以给输入框添加@input事件：

<input
  type="text"
  v-model="search"
  @input="searchTask"
  placeholder="search task"
/>

内容的提问来源于stack exchange，提问作者user21728832