Array is undefined from Veux Store

Question

I am retrieving data from the Vuex Store. I first of all want to check of the array is present in the Vuex Store, after that I want to check if the noProducts object at index 0 is not present.

The reason for this is that tweakwiseSortedProducts is used for both products and a no Products boolean to react to in the front-end

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

My front-end currently, often, returns:

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

In the console.

Gergo Miklos · Accepted Answer · 2021-09-10 09:54:54Z

2

This happens because tweakwiseSortedProducts is not undified but an empty list. You can try:

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

or just:

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

which will be false if any of this elements is undefined, or true if noProducts is really false

answered Sep 10, 2021 at 9:54

Gergo Miklos

364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

k22pr · Accepted Answer · 2021-09-10 09:54:16Z

1

It is recommended to use getter when calling a value in Vuex.
Please refer to the following.

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

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

answered Sep 10, 2021 at 9:54

k22pr

3092 silver badges9 bronze badges

Collectives™ on Stack Overflow

Array is undefined from Veux Store

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related