VUE：如何使用 watch 和 vue get 和 set 组合 api-解网

问：

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

但是我不断收到大量错误，例如： 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
};

vue.js vuejs3 观看 vue-composition-api vuetifyjs3

评论

0赞 Estus Flask 10/12/2023

您正在 reversedHistory setter 中设置 reversedHistory.value。这就是递归

0赞 user3118363 10/12/2023

所以它应该是 user.value.history = value; ？

0赞 Estus Flask 10/12/2023

总的来说，改变一个 getter 不是一个好主意。不知道user.value.history是什么。什么是商店？是vuex吗？问题没有提到这一点，这是相关的。你需要有 vuex 突变才能显式修改一个存储

0赞 user3118363 10/12/2023

是的，是 vuex，我已经更新了查询，

答：

1赞 Estus Flask 10/12/2023 #1

reversedHistory在 setter 内部改变自身，这会导致递归。

考虑到用户历史记录预计将从商店使用，因此拥有相关的 Vuex getter 是有意义的，例如 .profile/getHistory

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

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

它可能是：

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

评论

0赞 user3118363 10/12/2023

哦哦，我让你完整，这完全有道理，我试图避免的是太多的状态更新。我试图创建一个临时变量来保存更改，而不是在每次按键时点击存储，但我会使用它，非常感谢，这很有意义。

上一个：本地监视中的 Angular 16 运行库

下一个：在python doit（pydoit）中，watch参数的预期行为是什么