当标题搜索输入再次为空时，如何可视化初始数组？

Question

在输入字段中按标题搜索待办事项之后，而不是将搜索输入设为空，我希望再次呈现待办事项的初始数组。我试图用 if 语句实现它，但它不起作用，并且只呈现待办事项之前搜索的内容，而不是待办事项的初始列表。我不确定 if 语句是最好的方法。

https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=pages%2Findex.vue,store%2Findex.js,components%2FTask.vue

// Child component

<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 {
  computed: {
    tasks() {
      return this.$store.getters.getTasks;
    },
  },
  mounted() {
    this.$store.dispatch('getTasks').then((data) => console.log(this.tasks));
  },
  methods: {
    searchTask() {
      let search = this.search;
      this.$store.commit('searchTask', search);
    },
  },
};
</script>

// Store 

export const state = () => ({
  tasks: [],
});

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;
  },
  searchTask(state, search) {
    if (search) {
      state.tasks = state.tasks.filter((t) => {
        return t.todo.toLowerCase().includes(search.toLowerCase());
      });
    } else if (search === '') {
      return state.tasks;
    }
  },
};

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

Answer 1

你不应该改变原始状态，相反，你可以用

method style access

定义一个吸气剂：

export const state = () => ({
  tasks: [],
});

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;
  },
};

export const getters = {
  getTasks:(state) => (search) => {
   if (search) {
      return state.tasks.filter((t) => {
        return t.todo.toLowerCase().includes(search.toLowerCase());
      });
    } else if (search === '') {
      return state.tasks;
    }
  }
};

你应该这样称呼它：

computed: {
    tasks() {
      return this.$store.getters.getTasks(this.search);
    },
  },