Блог

Я получаю данные из магазина Vuex. Я прежде всего хочу проверить, присутствует ли массив в хранилище Vuex, после этого я хочу проверить, нет ли объекта noProducts с индексом 0.

Причина этого в том, что tweakwiseSortedProducts используется как для продуктов, так и для логического значения «Нет продуктов», на которое нужно реагировать в интерфейсе

 tweakwiseHasProducts () {
  if (this.$store.state.tweakwise?.tweakwiseSortedProducts) {
    return (
      this.$store.state.tweakwise.tweakwiseSortedProducts[0].noProducts ===
      false
    );
  }
  return false;
},
 

Мой интерфейс в настоящее время часто возвращается:

 this.$store.state.tweakwise.tweakwiseSortedProducts[0] is undefined
 

В консоли.

Это происходит потому, что tweakwiseSortedProducts не является неопределенным, а представляет собой пустой список. Вы можете попробовать:

 tweakwiseHasProducts () {
  if (this.$store.state.tweakwise?.tweakwiseSortedProducts?.length !== 0) {
    return (
      this.$store.state.tweakwise.tweakwiseSortedProducts[0].noProducts ===
      false
    );
  }
  return false;
},
 

или просто:

 tweakwiseHasProducts () {
  return this.$store.state.tweakwise?.tweakwiseSortedProducts[0]?.noProducts === false;
},
 

который будет ложным, если какой-либо из этих элементов не определен, или истинным, если noProducts действительно ложен

Рекомендуется использовать getter при вызове значения в Vuex.
Пожалуйста, обратитесь к следующему.

   getters: {
    getTweakwiseSortedProducts: (state: any) => {
      return state.tweakwise?.tweakwiseSortedProducts || [];
    },
  },
 

 tweakwiseHasProducts () {    
  this.$store.getters.getTweakwiseSortedProducts.length ? true : false;
}