计算属性对状态变化没有反应

Question

我正在开发一个产品概览页面，该页面根据您正在查看的当前类别发送 API 调用：

    store.dispatch("tweakwise/fetchAPIAttributesLayeredNavigation", {
     tweakwiseCategory,
     this.pageNumber,
}

在我的商店中，来自此 API 调用的数据将设置为以下 VueX 商店状态：

this.$store.state.tweakwise.tweakwiseLayeredNavigationAttributes: []

我想在前端对这些数据做出反应，但我的计算方法似乎对这种变化没有反应。正如您在下面的函数中看到的那样，我添加了一个 Catch 来防止“未定义”错误。但是，在设置状态后将不会调用该函数。 这个计算属性也被添加到组件的 Mount() 操作中

computed: {
    initialFetchProducts() {
      this.fetchProducts(
        this.$store.state.tweakwise?.tweakwiseLayeredNavigationAttributes || []
      );
    },
},

Answer 1

为你想观察的状态创建计算属性， 而不是为这个道具创建 watch()。在 watch 中，您可以对计算的属性更改做出反应。

<template>
  <div v-for="product in products"></div>
</template>
<script>
export default {
  data: {
    return {
      products: [],
    }
  },
  computed: {
    tweakwiseLayeredNavigationAttributes() {
      return this.$store.state.tweakwise.tweakwiseLayeredNavigationAttributes;
    },
  },
  watch: {
    // on every tweakwiseLayeredNavigationAttributes change we call fetchProducts
    tweakwiseLayeredNavigationAttributes: {
      handler(newValue, oldValue) {
        this.fetchProducts(newValue);
      },
      deep: true, // necessary for watching Arrays, Object
      immediate: true, // will be fired like inside mounted()
    }
  },
  methods: {
    async fetchProducts(params) {
      const products = await axios.get('/api', params);
      this.products = products;
    }
  }
};
</script>