Как во Vue 3 добавить default value для input?

Question

[uRoot]

Есть самый обычный инпут:

<input
  v-model.trim="filters.search"
  class="input search-post__search-input"
  placeholder="Search"
  @input="setSearch"
/>

Я хочу брать значение из этого инпута и писать его в стор, но с задержкой:

const filters = computed(() => store.getters.getFilter)

const setSearch = (e: any) => {
  debounce(() => {
    store.dispatch("setFilters", { search: e.data })
  }, 500)
}

Как сделать так, что бы в инпуте всегда было то, что введёт пользователь, а в сторе то, что попадёт туда с задержкой? При этом, на других страничках, значение должно быть из стора.

Answer 1

[0xD34F]

Редактируйте через инпут локальное значение:

const filters = reactive({});

<input v-model="filters.search">

За которым установите наблюдение - там будут ваши debounce и отправка в стор:

watch(
  () => filters.search,
  debounce(search => store.commit('setFilters', { search }), 1500)
);

А чтобы это локальное значение обновлялось при изменениях в сторе, осуществляемых из других мест, также установите наблюдение за стором:

watch(
  store.state.filters,
  val => Object.assign(filters, val), { immediate: true }
);

https://jsfiddle.net/xs40j5o1/