如何将Vuex action中的错误信息传递到调用组件？

catch块无法捕获错误有两个核心原因：

1. 异常没有被真正抛出：当前action中saveResult === false时是直接return false，这只会让dispatch返回的Promise进入fulfilled状态（resolve值为false），只有Promise进入rejected状态时才会触发catch逻辑，直接return值不会触发异常捕获。
2. 没有等待异步Promise执行完成：组件中调用this.$store.dispatch()时没有加await，dispatch本身返回Promise，同步执行的try块会在异步逻辑执行完成前就结束，后续就算Promise reject也无法被已退出的try/catch块捕获。

1. 调整Vuex Action逻辑 #

业务判定保存失败时主动抛出异常，让Promise进入reject状态，修改后代码如下：

async save({ commit, state, dispatch }: ActionCtx): Promise<boolean> {
  const { entity, updateStack, $options } = state;
  const saveResult = await saveEntity('fbCities', entity, updateStack, $options);
  console.log('SAVE RESULT =', saveResult);
  if (saveResult === false) {
    // 主动抛出业务异常，触发Promise reject
    throw new Error('城市数据保存失败');
  }
  if (typeof saveResult === 'string') {
    return dispatch('load', saveResult);
  }
  commit('update entity', saveResult);
  return true;
}

注：如果saveEntity、dispatch('load')内部本身存在未捕获的异常，会自动沿Promise链向上抛出，不需要额外处理。

2. 调整组件调用方式 #

给dispatch调用加上await，等待异步任务执行完成，才能让try/catch正常捕获到异步抛出的错误，修改后代码如下：

async saveClick() {
  try {
    const saveRes = await this.$store.dispatch('Handbook/City/save');
    // 保存成功的后续逻辑
    console.log('保存完成', saveRes);
  } catch (error) {
    // 此处可正常捕获action中抛出的所有异常
    console.log('ERROR =', error);
  }
}

如果不想用异常捕获的方式处理失败场景，也可以不抛错，直接判断await后的返回值处理失败逻辑：

async saveClick() {
  const saveRes = await this.$store.dispatch('Handbook/City/save');
  if (saveRes === false) {
    console.log('保存失败');
    return;
  }
  // 保存成功逻辑
}

但这种方式无法捕获saveEntity、load action中抛出的运行时异常，还是会出现未捕获的Promise报错，生产环境更推荐用throw+try/catch的统一错误处理方案。
如果不想写async/await，也可以直接用Promise的catch链式调用接收错误：

saveClick() {
  this.$store.dispatch('Handbook/City/save')
    .then(res => console.log('保存成功', res))
    .catch(error => console.log('ERROR =', error));
}

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