Getter throw error

Hello,
I am trying to get a status on a getter.
I load the data from an API in an action and pass it to the state via mutation.

The getter should find out what value the value in the state has and return a corresponding value.
My problem is that the getter tries to get a state before the action has set the state.

getter:
     isActiveLightById: (state) => (id) => {
            if (state.Control[id] === undefined) {
                throw new Error('Datenpunkt noch nicht verfügbar');
            }
            const item = state.Control[id][3].Value;
            return item;
            },

state:
Control: {},

computed on Component:

computed: {
  isActiveLight() {
        return this.$store.getters['controls/isActiveLightById'](this.action.ID);
  },

action:
 async getCurrentValue({ commit }, C2RID) {
        this._vm.axios.defaults.baseURL = baseURL;
        await this._vm.axios.get('/GAValue', { params: { C2RID } })
            .then((res) => {
                commit('setControl', {
                    C2RID,
                    value: res.data,
                });
            })
            .catch((error) => {
                console.log(error);
            });
    },

What is the problem that it has not loaded the state yet, or what do I have to do to make it wait until the state is there… or just not run into the error and abort the script.

Thank a lot

Instead of throwing an error, return a falsely value and in your component, check that the value isn’t falsely before rendering it.

Hi, thanks for your replay,

is this a better solution?

isActiveLightById: (state) => (id) => {
        if (state.Control[id] === undefined) {
            return 0;
        }
        const item = state.Control[id][3].Value;
        return item;
        },
    isActiveBlindStateByID: (state) => (id) => {
        let Blind = {
            Position: 0,
            Segment: 0,
        };
        if (state.Control[id] === undefined) {
            return Blind;
        }
       Blind = {
            Position: state.Control[id][8].Value,
            Segment: state.Control[id][10].Value,
        };
       return Blind;
    },

I still have a problem.
If the state changes, my getter does not get that.

I think there is a small timing problem.
If I use the code as above, then the state from the getter does not change.

Does anyone have an idea how I can do this differently?

Thank you

From your original code, all you should need to do is…

isActiveLightById: (state) => (id) => {
  if (!state.Control[id]) return

  return state.Control[id][3].Value;
}

Then when you’re trying to access the isActiveLight computed within your template…

<template>
  <div v-if="isActiveLight">...</div>
</template>

Thank you for your reply.
I had to rebuild it that way because of eslint.
But I still get the same errors.

   isActiveLightById: (state) => (id) => {
        if (!state.Control[id]) return;
        // eslint-disable-next-line consistent-return
        return state.Control[id][3].Value;
    },