如何在Signal Store保存数据时将服务抛出的错误通知给组件？

我看了你的代码，问题很清晰：现在的error计算属性只盯着加载资源（_thingRes）的错误，但保存操作的错误被你catch之后只打印了控制台，没同步到Store的状态体系里，所以组件根本感知不到保存失败的错误。

咱们可以给Store加个专门存保存错误的状态，然后把加载错误和保存错误合并到error计算属性里，这样组件就能统一拿到所有操作的错误了，完全符合你“Store负责状态和错误通知，服务只管数据”的架构思路。

修改后的完整代码（标注了改动点） #

export const ThingStore = signalStore(
  // 改动1：扩展状态，新增saveError字段专门存保存操作的错误
  withState<Thing & { saveError: unknown | null }>({ 
    id: EMPTY_UUID, 
    name: "", 
    code: "",
    saveError: null
  } as Thing & { saveError: unknown | null }),

  withProps(() => ({ _thingSrv: inject(ThingService) })),

  withProps((state) => ({ 
    _thingRes: resource({ 
      request: state.id, 
      loader: async () => await state._thingSrv.load(state.id()) 
    }), 
  })),

  withComputed((state) => ({ 
    // 改动2：合并加载资源的错误和保存操作的错误
    error: computed(() => {
      // 优先返回加载错误，如果没有就返回保存错误
      return state._thingRes.error() || state.saveError();
    }), 
    ready: computed(() => !state._thingRes.isLoading()), 
  })),

  withMethods((state) => ({ 
    init: (id: string) => patchState(state, { id }), 
    save: (data: Thing) => {
      // 改动3：保存前先清空旧的保存错误，避免残留
      patchState(state, { saveError: null });
      state._thingSrv 
        .update(data) 
        .then((result) => {
          // 成功保存后，同步结果+清空保存错误
          patchState(state, { ...result, saveError: null });
        }) 
        .catch((error) => {
          console.warn(error);
          // 改动4：把保存错误同步到Store状态里
          patchState(state, { saveError: error });
        }); 
    }, 
  })),

  withHooks({ 
    onInit(store) { 
      effect(() => {
        const resValue = store._thingRes.value();
        if (resValue) {
          patchState(store, resValue);
        }
      }); 
    } 
  }) 
);

关键改动说明 #

1. 新增saveError状态：在withState里扩展了原有状态，专门用来存储保存操作的错误，初始值为null，这样可以和“无错误”的状态明确区分开。
2. 合并错误到computed属性：原来的error只取加载资源的错误，现在改成先返回加载错误，没有的话再返回保存错误，组件只需要监听error()就能统一感知所有操作的错误。
3. 保存操作的错误同步：在save方法的catch分支里，用patchState把错误同步到saveError状态；同时成功保存后要主动清空saveError，避免组件看到旧的错误信息残留。

这样改完之后，不管是初始加载失败，还是保存操作失败，组件都能通过Store的error计算属性实时感知到，完全满足你的需求，而且严格保持了“服务只管数据流转、Store负责状态和错误对外暴露”的职责分离。

内容来源于stack exchange