17370845950

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），但多数项目真用不到那么重。