如何在 Vuex 商店中搜索标题？

Question

我希望通过单击搜索按钮并输入搜索输入来按标题过滤一系列任务。我正在使用 Vuex 并通过提交将搜索参数传递到突变中以过滤初始列表。但是列表没有呈现。还是 Vuex 需要通过 Actions 来完成？

子组件

<template>
    <div class="tasks">
      <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" />
    </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
    };
  },
  computed: {
    tasks() {
      return this.$store.state.tasks;
    },
  },
  created() {
    this.$store.dispatch('getTasks').then((data) => console.log(this.tasks));
  },
  methods: {
    searchTask() {
      this.$store.commit('searchTask', this.search);
    },
  },
};
</script>

商店

export const state = () => ({
  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.tasks = data;
  },
  searchTask(state, search) {
    return state.tasks.filter((t) => {
      return t.todo.toLowerCase().includes(search);     // isn't filtering the iniiial array
    });
  },
};

Answer 1

而不是返回尝试将

tasks

设置为过滤数组：

searchTask(state, search) {
  state.tasks = state.tasks.filter((t) => {
    return t.todo.toLowerCase().includes(search.toLowerCase());     
  });
},