Blazor组件间共享状态有四种方式:1. CascadingParameter适用于父子组件局部透传;2. Singleton/Scoped服务适合跨页面响应式更新;3. NavigationManager监听路由参数适合URL驱动状态;4. JS Interop同步浏览器存储适合持久化场景。

Blazor 组件间共享状态,核心在于让多个组件能读写同一份数据。选哪种方式,取决于数据作用域、更新频率、是否跨页面,以及你愿不愿意引入额外依赖。
使用 CascadingParameter 传递上下文状态
适合父子组件层级明确、状态只在局部树中流动的场景。比如主题色、用户登录态、语言偏好等需要“自上而下”透传但不希望层层手动传参的情况。
- 父组件用 CascadingValue 包裹子内容,并提供值或对象实例
- 子组件用 [CascadingParameter] 接收,支持类型匹配或命名匹配(
CascadingParameter(nameof="MyState")) - 注意:默认不触发重渲染 —— 如果共享的是普通 class 实例,需手动调用
StateHasChanged();更推荐用 INotifyPropertyChanged 或封装为 ObservableObject 类型
通过服务(Singleton Scoped Service)集中管理状态
最常用也最推荐的方式,尤其适合跨路由、多级嵌套、需响应式更新的状态(如购物车、全局通知、表单暂存)。
- 注册为 Singleton(整个应用生命周期一份)或 Scoped(每个 Circuit 一份,Blazor Server 默认;WASM 中 Scoped 等同于 Singleton)
- 服务内部用 EventCallback、NotifyStateChanged 事件,或集成 System.Reactive / Microsoft.Extensions.DependencyInjection 的观察者模式
- 组件中注入该服务,监听变化并调用
InvokeAsync(StateHasChanged)触发刷新(Server)或直接调用(WASM)
利用 NavigationManager 监听路由 + 参数解析
适用于状态本质来自 URL(如搜索关键词、分页页码、筛选条件),且希望支持浏览器前进/后退、分享链接的场景。
- 组件注入 NavigationManager,订阅
LocationChanged事件解析查询参数 - 配合 UriHelper(WASM)或 NavigationManager.ToBaseRelativePath 提取路径段
- 注意:仅适合“只读”或“可序列化”的轻量状态;修改状态需主动
NavigationManager.NavigateTo更新 URL,避免硬刷新
借助 JS Interop 同步浏览器端存储
当状态需持久化、跨会话保留,或与第三方 JS 库共用数据时可用,比如用户偏好设置、折叠面板状态。
- 用 localStorage 或 sessionStorage 存储 JSON 字符串
- Blazor 组件通过 IJSRuntime 调用 JS 方法读写,再触发本地状态更新
- 建议封装成带变更通知的服务(例如:写入后触发
OnStateChanged事件),避免多个组件各自轮询
基本上就这些。不需要复杂框架时,服务 + 事件就够了;要深度解耦可考虑 Flux-like 模式(如 Blazored.Fluxor),但多数项目真用不到那么重。










