VUE: how to use watch with vue get and set composition api

Question

I am trying to create a searchable table element where user can also search and filter the returned result. but i can't seem to get how to set the value in the computed property setter.

but I keep getting tons of errors like: RangeError: Maximum call stack size exceeded

import { watch } from "vue";
import { computed, ref, reactive } from "vue";
import { useStore } from "vuex";



const searchText = ref("");
watch(searchText, () => filterHistory());
const user = computed(() => store.getters["profile/getProfile"]);

const reversedHistory = computed({
  get() {
    return user.value.history.reverse();
  },
  set(value) {
    reversedHistory.value = value;
  },
});


const filterHistory = () => {
  let newHistory = reversedHistory.value.filter(
    (item) => searchText === item.person
  );
  rerturn newHistory
};

You're setting reversedHistory.value inside reversedHistory setter. That's recursion — Estus Flask
– Estus Flask, Commented Oct 12, 2023 at 9:31
It's not a good idea overall to mutate a getter. It's unknown what's user.value.history. What's store? Is it vuex? The question doesn't mention this, this is relevant. You need to have vuex mutation to explicitly modify a store — Estus Flask
– Estus Flask, Commented Oct 12, 2023 at 10:03

Estus Flask · Accepted Answer · 2023-10-12 10:36:05Z

1

reversedHistory changes itself inside a setter, this results in recursion.

Considering that user history is expected to be used from store, it makes sense to have relevant Vuex getter like profile/getHistory.

It's generally incorrect to mutate read-only computed, as it can discard the changes on the next update.

Vuex state isn't supposed to be mutated outside a store, there's supposed to be an action or mutation.

It could be:

const reversedHistory = computed({
  get() {
    return store.getters["profile/getHistory"]).reverse();
  },
  set(value) {
    store.commit('profile/setHistory', value.reverse());
  },
});

answered Oct 12, 2023 at 10:36

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3118363 Over a year ago

oh oh, I get you complete, this completely make sense, what i was trying to avoid was too much state updates. i was trying to create a temporary variable to hold changes instead of hitting the store for each key press, but i'll work with this, thank you so much, makes a lot of sense.

Collectives™ on Stack Overflow

VUE: how to use watch with vue get and set composition api

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related