VUE：如何将 watch 与 vue get 和 set 组合 api 一起使用

Question

我正在尝试创建一个可搜索的表格元素，用户还可以在其中搜索和过滤返回的结果。但我似乎不知道如何在计算属性设置器中设置值。

但我不断收到大量错误，例如： RangeError：超出最大调用堆栈大小

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

Answer 1

reversedHistory

在 setter 中改变自身，这会导致递归。

考虑到预计将从商店使用用户历史记录，因此拥有像

profile/getHistory

这样的相关 Vuex getter 是有意义的。

更改只读计算通常是不正确的，因为它可能会丢弃下次更新时的更改。

Vuex 状态不应该在商店外发生突变，而应该有一个动作或突变。

可能是：

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