coordinate-components
提供多种实现策略,适合复杂 UI 的状态同步与复用场景。
在 Blazor 中跨渲染边界共享状态,解决非父子组件通信问题。
在 Blazor 里解决非父子组件之间的状态共享问题,比如跨页面的购物车、通知计数或全局主题,用 CascadingValue、作用域服务加变更事件,或通过 DI 的 CascadingValueSource 实现。适合需要跨渲染模式传播状态、或发现 cascading 值不触达交互子组件时使用。特别会解释何时用 scoped vs singleton,以及如何在不同渲染边界保持同步。
▸ 展开 SKILL.md 英文原文
Share state between components that don't have a direct parent-child parameter relationship, using cascading values, scoped services with change events, or CascadingValueSource via DI. USE WHEN the user needs a CascadingParameter or CascadingValue that works across render mode boundaries, a shopping cart or notification count accessible from multiple pages, a theme or user preference cascaded app-wide, or when components in different parts of the tree must react when shared data changes. Also USE WHEN cascading values aren't reaching interactive children in per-page interactivity mode, or when the user needs to understand scoped vs singleton service lifetime for state on Blazor Server. DO NOT USE for direct parent-child parameter passing or EventCallback (see author-component), for persisting state across prerender-to-interactive transitions (see support-prerendering), or for service abstractions for data fetching in Auto/WebAssembly (see fetch-and-send-data).
帮我安装这个 skill:https://raw.githubusercontent.com/dotnet/skills/main/plugins/dotnet-blazor/skills/coordinate-components/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/dotnet/skills/main/plugins/dotnet-blazor/skills/coordinate-components/SKILL.md"# Coordinate Components ## Step 1 — Read AGENTS.md Read `AGENTS.md` at the workspace root to learn the project's conventions before making changes. ## Step 2 — Decide the scope | Need | Mechanism | When to use | |------|-----------|-------------| | Subtree (same render mode) | `CascadingValue` component | Theme, layout config within a layout | | App-wide (all render modes) | `CascadingValueSource<T>` via DI | Current user, feature flags, theme shared globally | | Mutable shared state within a circuit | Scoped service + `Action` event | Shopping cart, notification count, selected filters | For parent→child one level: use `[Parameter]` / `EventCallback` (see `author-component` skill). For