调用状态清空函数后出现「期望字符串类型却得undefined」错误排查

一、控制台报错原因及解决 #

报错根源 #

1. 多余的await包裹commit：Vuex的commit是同步方法，不需要用await修饰，虽然这不会直接引发错误，但属于冗余代码。
2. Mutation类型处理错误：报错提示「expects string as the type, but found undefined」，说明你定义的setNextStep/setPreStep这两个Mutation，可能对传入的payload做了字符串类型的强制处理（比如错误调用toString()），但实际传入的是空数组[]，类型不匹配导致报错。不过因为最终state还是被赋值为数组，所以功能仍能正常运行。

修复方案 #

• 移除Action中commit前的await：

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

• 修正Mutation逻辑，确保正确处理数组类型的payload：

const mutations = {
  setPreStep(state, payload) {
    state.preSteps = payload; // 直接赋值数组，无需类型转换
  },
  setNextStep(state, payload) {
    state.nextSteps = payload;
  }
};

二、添加await后功能失效的原因及解决 #

失效根源 #

你在组件中直接通过this.preStep.push()修改Vuex的state——preStep是通过mapGetters获取的state.preSteps的引用，这种绕过Mutation直接修改state的操作不符合Vuex规范，会导致响应式检测异常。当添加await this.clearAllStatesData()后，state被重置为新的空数组，后续直接push的操作无法被Vue正确追踪，最终导致数据无法正常更新。

修复方案 #

1. 新增Mutation用于添加元素：

const mutations = {
  // ...原有Mutation
  addPreStep(state, item) {
    state.preSteps.push(item);
  },
  addNextStep(state, item) {
    state.nextSteps.push(item);
  }
};

2. 组件中通过Mutation修改state，替换直接push的操作：
   同时把错误使用的filter改为forEach（filter是用于过滤数组的，不适合执行遍历添加的副作用）：

async getWorkflowStep(list) {
  await this.clearAllStatesData(); // 现在添加await是安全的
  try {
    const response = await this.$store.dispatch("axiosGet", {
      url: `folder/api/workflow-steps`,
      params: { StepId: this.stepEidV, WorkflowId: this.wseid }
    });

    if (response.status === 'error') {
      this.loading = false;
      return;
    }

    this.loading = false;
    const eid = list.eid;
    await this.fetchSignatures(eid);

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

      if (pre.stepEid !== null) {
        this.$store.commit('addPreStep', pre);
      }
      if (next.stepEid !== null) {
        this.$store.commit('addNextStep', next);
      }
    });
  } catch (err) {
    this.loading = false;
    // 可在此添加错误处理逻辑
  }
},

内容的提问来源于stack exchange，提问作者sanaz baghban