Error expects string as the type, but found undefined with commit state to clear

Question

I have a function that passes Data to Array, and whenever I call it again the previous data must be cleared. I'm handling it in-store as:

const actions = {
 async clearAllStatesData({ commit }) {
        await commit('setNextStep' , [])
        await commit('setPreStep' , [])
    },
}

the "setNextStep" & "setPreStep" are my mutations for states:

const getters = {
preStep: (state) => state.preSteps,
nextStep: (state) => state.nextSteps,
}

and:

const state = {
preSteps: [],
nextSteps: [],

}

now in my component I call it like:

async getWorkflowStep(list) {
  this.clearAllStatesData()
  await this.$store.dispatch("axiosGet",
      {url: `folder/api/workflow-steps`, params: {StepId: this.stepEidV, WorkflowId: this.wseid}})
      .then(async response => {
        if (response.status === 'error') return
        this.loading = false
        let eid = list.eid
        await this.fetchSignatures(eid)

        this.workflowStepsArray = response.data.data.data
        this.workflowStepsArray.filter(steps => {
          const pre = {
            stepTitle: steps.preStepTitle,
            stepEid: steps.preStepEid
          }
          const next = {
            stepTitle: steps.nextStepTitle,
            stepEid: steps.nextStepEid
          }

          if (pre.stepEid !== null) this.preStep.push(pre)
          if (next.stepEid !== null) this.nextStep.push(next)
          return pre , next
        })
      })
},

well here, I first set the state to empty Array, and then call my function and push my new data in. here, after doing the this.clearAllStatesData() I get the Error in the console but anyways the code works really fine. BTW why does it keep getting this error?? also let me note, in WebStorm the clear function says to add await before my clear function but when I do, nothing will work :)

in the component's computed called getter:

...mapGetters(['preStep', 'nextStep']),

Answer 1

I've changed little bit your function, cause it's not clear why you push instead commit to store and what kind on filter is there.

async getWorkflowStep(list) {
    try {
        // Should loading at start ?
        this.loading = true;

        await this.$store.dispatch('clearAllStatesData');

        const response = await this.$store.dispatch('axiosGet', {
            url: 'folder/api/workflow-steps',
            params: {
                StepId: this.stepEidV,
                WorkflowId: this.wseid,
            },
        });

        if (response.status === 'error') return;

        await this.fetchSignatures(list.eid);

        this.workflowStepsArray = response?.data?.data?.data ?? [];

        //Are you sure you need to update the workflowStepsArray ?
        this.workflowStepsArray.forEach((steps) => {
            const pre = {
                stepTitle: steps.preStepTitle,
                stepEid: steps.preStepEid,
            };
            const next = {
                stepTitle: steps.nextStepTitle,
                stepEid: steps.nextStepEid,
            };

            if (pre.stepEid !== null) {
                // commit instead push
                this.$store.commit('setPreStep', [...this.preStep, pre]);
            }

            if (next.stepEid !== null) {
                // commit instead push
                this.$store.commit('setNextStep', [...this.nextStep, next]);
            }

            //Do you need here return ?
            //return pre, next;
        });
    } catch (error) {
        // handle the error
    } finally {
        this.loading = false;
    }
}

Also remove async await from commit

const actions = {
    clearAllStatesData({ commit }) {
        commit('setNextStep', []);
        commit('setPreStep', []);
    },
};