Blazor 购物车状态管理和实现教程

Blazor购物车状态管理应使用Scoped服务封装，配合OnChange事件通知和localStorage持久化。在Program.cs注册服务，组件中注入并订阅事件，变更后自动保存至localStorage，刷新时重新加载，避免内存泄漏和全局污染。

Blazor 中购物车状态管理的核心是让多个组件（如商品列表、购物车侧边栏、结算页）实时共享和响应同一份购物车数据，同时保证跨页面或组件刷新后不丢失——关键在于选择合适的作用域和服务生命周期，并配合合理的更新通知机制。

用 Scoped 服务封装购物车状态

推荐将购物车逻辑封装为一个 Scoped 生命周期的服务（如 ShoppingCartService），这样在单页应用（SPA）中，每个用户会话拥有独立实例，既避免了 Singleton 的全局污染风险，又比 Transient 更高效（无需反复创建）。

• 在 Program.cs 中注册：builder.Services.AddScoped<shoppingcartservice>();</shoppingcartservice>
• 服务内部用 List<cartitem></cartitem> 存储条目，提供 AddItem()、RemoveItem()、UpdateQuantity() 等方法
• 每次修改后调用 NotifyStateChanged() —— 这是一个自定义事件（public event Action? OnChange;），供组件订阅

在组件中响应式监听与触发更新

组件（如 CartSidebar.razor 或 ProductCard.razor）通过 @inject ShoppingCartService Cart 获取服务，并在 OnInitializedAsync 中订阅状态变更：

• 订阅写法：Cart.OnChange += StateHasChanged;
• 务必在 Dispose 或 OnDisposing 中取消订阅，防止内存泄漏：Cart.OnChange -= StateHasChanged;
• 添加/删除商品时，只调用 Cart.AddItem(...)，不手动调用 StateHasChanged() —— 由服务内部的 NotifyStateChanged() 统一触发

持久化：页面刷新后恢复购物车

默认情况下，Scoped 服务在浏览器刷新后会被重建，导致购物车清空。要保留数据，需结合客户端存储：

标签： js json 浏览器 懒加载 ai win 作用域 延迟加载 .net red