Блог

Я работаю над страницей обзора продукта, которая отправляет вызов API на основе текущей категории, которую вы просматриваете:

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

В моем магазине данные из этого API-вызова будут установлены в следующем состоянии хранилища VueX:

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

Я хочу отреагировать на эти данные в моем интерфейсе, но мои вычисленные методы, похоже, не реагируют на это изменение. Как вы также можете видеть в приведенной ниже функции, я добавил уловку, чтобы предотвратить «неопределенную» ошибку. Функция, однако, не будет вызываться после того, как состояние будет установлено.
Это вычисляемое свойство также добавляется в функцию Mount() компонента

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

создайте вычисляемое свойство для состояния, которое вы хотите наблюдать, чем создайте функцию 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>