监听getter的Vuex计算属性不更新

Posted 2023-02-22

【中文标题】监听getter的Vuex计算属性不更新

【英文标题】：Vuex computed property that listens to getter not updating

【发布时间】：2018-11-28 07:49:28

【问题描述】：

我有一个问题，即我的计算属性（基本上只是调用具有 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
        
      )
    ,

【问题讨论】：

我敢打赌这是因为 getter (['shoppingCart/isInCart']) 的动态访问——它会如何映射它？ :) 另外，我没有清楚地看到逻辑-您基本上是在调用一个方法（它是一个 getter），并且您想在商店更改时触发计算属性？当您从该商店调用方法时，商店中的哪些内容可以在此处更改？

当您添加产品时，商店会调用 API 并重新获取所有内容。意思是 setCart 是用一个新的项目列表调用的： state.item 在它的数组中还有 1 个项目。看到我有一些代码放错地方了，现在修好了。

isInCart 是一个计算属性，对吧？我会认为是因为我之前说过的动态吸气剂 - 尝试简化它。然后我建议按照文档中的说明使用mapGetters。那么如果你观察状态变化然后调用getter也是很好的，因为它需要一个参数并且我不确定它是否可以反应，因为参数也可以改变:)

是的。我使用 mapState 添加了 isInCart 的新“版本”，以规避 getter 对参数问题的反应性。见底部。（但仍然不起作用）如果重要的话，计算值用于 v-if="isInCart"。

我没有得到这个映射状态。这是我的工作（刚刚测试过）：computed: ...mapGetters(['items']) , watch: items () console.log('items updated')

【参考方案1】：

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