Vuex 计算属性监听 getter 不更新

Question

我有一个问题，当存储更改时，我的计算属性（基本上只是调用带有 id 的存储 getter）不会重新计算。有人知道为什么吗？

计算的产品（isInCart 是相关的，另一个只是显示状态更改有效）

isInCart() {
    var isInCart = this.$store.getters['shoppingCart/isInCart'](this.product.id);
    return isInCart;
  }

Vuex 商店

const getters = {
  count: state => state.items.length,
  hasItems: state => !!state.items.length,
  isInCart(state) {
    return id => state.items.findIndex((item) => {
      return item.productId === id; 
    }) > -1;
  }
}

状态改变是通过这样的突变来完成的：

setCart(state, cart) {
    state.items = cart.items;
  },

对 getter 的初始调用按预期工作。只是当状态改变时，它不会再次运行。其他吸气剂“hasItem”和“count”按预期工作。

---

我还尝试在我的组件中将函数直接放入计算中，如下所示：

computed: {
     ...mapState({
        isInCart(state) {
          var id = this.product.id;
          return !!state.shoppingCart.items.filter(item => item.productId === id).length
        }
      })
    },

Answer 1

这是因为 getter 返回一个函数。getter 所依赖的每个状态都是一个观察者。它观察这些依赖关系的变化。任何更改都可以触发 getter 运行。但是，如果 getter 仅返回一个函数，则您将无法获得该函数的结果。相反，您会得到具有更新值的函数结果。