제목별 검색 입력이 다시 비어 있을 때 초기 배열을 시각화하는 방법은 무엇입니까?

제목별 검색 입력이 다시 비어 있을 때 초기 배열을 시각화하는 방법은 무엇입니까?

입력 필드에서 제목별로 작업관리 항목을 검색하고 검색 입력을 비워 두면 작업관리의 초기 배열이 다시 렌더링될 것으로 예상됩니다.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;
  },
};

원래 상태를 변경해서는 안 되며, 대신 다음을 사용하여 게터를 정의할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/76189798/how-to-visualize-the-initial-array-when-search-input-by-title-is-empty-again