Signal Store中依赖selectedSite变化加载项目的最佳实践

方案1：直接在setSelectedSite方法中触发加载 #

这是最直观的实现方式，在设置选中站点的逻辑里直接调用加载项目的方法。好处是逻辑简单易懂，上手快；缺点是状态更新和异步请求逻辑耦合在一起，后续如果要调整加载规则，得改动setSelectedSite的代码。

修改后的setSelectedSite方法代码：

setSelectedSite: async (selectedSite: Site) => {
  patchState(state, { selectedSite, selectedProject: null });
  // 选中站点存在时加载对应项目，否则清空项目列表
  if (selectedSite?.id) {
    await this.loadProjectsBySiteId(selectedSite.id);
  } else {
    patchState(state, { projects: [] });
  }
},

方案2：用withHooks监听selectedSite变化（推荐） #

利用Signal Store的withHooks结合Angular的watch函数，监听选中站点的状态变化，自动触发项目加载逻辑。这种方式把状态更新和异步请求的逻辑分开，符合单一职责原则，后续维护和扩展更方便。

修改后的withHooks部分代码：

withHooks(({ loadSites, loadProjectsBySiteId, state }) => {
  const watch = inject(Watch);
  
  onInit(() => {
    loadSites();
    // 监听selectedSite的变化
    watch(state.selectedSite, (newSelectedSite) => {
      if (newSelectedSite?.id) {
        loadProjectsBySiteId(newSelectedSite.id);
      } else {
        // 没有选中站点时清空项目列表
        patchState(state, { projects: [] });
      }
    });
  });
}),

额外优化：处理重复请求 #

如果用户快速切换站点，可能会触发多个并行请求，导致状态混乱。可以给loadProjectsBySiteId加个防抖处理：

// 在withMethods里引入防抖逻辑（可使用lodash.debounce或自行实现）
import debounce from 'lodash.debounce';

// ...

return {
  // ...其他方法
  loadProjectsBySiteId: debounce(async (siteId: number) => {
    const projects = await projectsService.getProjectsBySiteId(siteId);
    patchState(state, { projects });
  }, 300), // 300ms防抖，避免频繁请求
  // ...
};

为什么不选withComputed？ #

withComputed是用来生成同步的派生状态的，它的回调函数不能包含异步操作（比如HTTP请求），完全不适合这个需要异步加载数据的场景，直接排除。

总结 #

• 追求快速实现、逻辑简单的话，方案1够用；
• 推荐方案2，它的代码结构更清晰，解耦了状态更新和业务逻辑，后续改需求或者加功能更省心。

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