如何在Vuex Store中按标题筛选任务列表？

不是必须用Vuex的Actions，你的问题出在mutation写法错误，以及未保留原始数据导致后续筛选失效，以下是具体修正方案：

核心问题分析 #

1. 你的searchTask mutation仅返回过滤后的数组，但未修改state中的tasks属性，Vue无法检测到状态变化，因此列表不会重新渲染；
2. 直接过滤state.tasks会覆盖原始全量数据，后续搜索只能基于已过滤的结果继续筛选，逻辑存在错误。

修正方案（两种可选） #

方案一：基于Vuex状态管理筛选（保留搜索按钮逻辑） #

修改Store代码，新增原始数据存储字段，正确更新state触发视图响应：

export const state = () => ({
  originalTasks: [], // 存储全量原始任务数据
  tasks: [], // 存储过滤后的任务数据
});

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

export const mutations = {
  setTasks(state, data) {
    state.originalTasks = data; // 保存原始全量数据
    state.tasks = data; // 初始默认显示全量数据
  },
  searchTask(state, search) {
    const keyword = search.trim().toLowerCase();
    if (!keyword) {
      // 搜索框为空时恢复全量数据
      state.tasks = state.originalTasks;
      return;
    }
    // 基于原始数据筛选，更新state.tasks触发视图更新
    state.tasks = state.originalTasks.filter(task => 
      task.todo.toLowerCase().includes(keyword)
    );
  },
};

组件代码无需修改，保持原有的searchTask方法调用mutation即可。

方案二：组件内computed实时筛选（更轻量） #

若无需将筛选状态存入Vuex，可直接在组件的computed中结合原始数据与本地搜索值实现实时筛选，无需修改mutation：

修改组件的computed部分：

computed: {
  originalTasks() {
    return this.$store.state.tasks; // Store的state仅保留原始全量数据
  },
  tasks() {
    const keyword = this.search.trim().toLowerCase();
    if (!keyword) return this.originalTasks;
    return this.originalTasks.filter(task => 
      task.todo.toLowerCase().includes(keyword)
    );
  },
},

同时可删除组件的searchTask方法和Store中的searchTask mutation，输入框会根据输入实时过滤列表，体验更流畅。

关键总结 #

• Actions主要用于处理异步逻辑（如接口请求），同步筛选逻辑完全可以用mutation或组件computed实现，无需依赖Actions；
• 筛选时必须保留原始全量数据，避免过滤后无法恢复或重复筛选逻辑错误；
• Vuex状态更新必须直接修改state的属性（不能仅返回结果），才能触发响应式视图更新。

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