C# Academy · 课时

Blazor 中的状态管理

Q: 「Blazor 中的状态管理」这节课中我会学到什么？

使用服务单例、Fluxor 或级联的 AppState 管理共享状态，使各组件中的 UI 保持一致。 你通过在浏览器中直接运行的动手代码来练习 C# Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用服务单例、Fluxor 或级联的 AppState 管理共享状态，使各组件中的 UI 保持一致。

Blazor 中的状态管理 是 CoddyKit 上的免费 C# Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 C# Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 C# Academy 课程共包含 4 节课。

Blazor 中的状态管理挑战

随着 Blazor 应用不断扩展，管理必须在许多无关组件之间共享的状态会变得复杂。简单的属性逐层传递会逐渐难以维持；您需要一个集中式、响应式的状态存储。

使用作用域服务管理简单状态

最简单的 Blazor 状态管理方式是使用一个持有状态并公开事件的作用域服务，让组件可以订阅状态变化。

public class CartState
{
    private readonly List<CartItem> _items = new();
    public IReadOnlyList<CartItem> Items => _items;
    public int Count => _items.Sum(i => i.Quantity);

    public event Action? OnChanged;

    public void Add(Product p)
    {
        var existing = _items.FirstOrDefault(i => i.ProductId == p.Id);
        if (existing is not null) existing.Quantity++;
        else _items.Add(new CartItem { ProductId = p.Id, Name = p.Name, Price = p.Price });
        OnChanged?.Invoke();
    }
}

订阅状态变化

组件订阅状态服务的 OnChanged 事件，并调用 StateHasChanged 重新渲染。请记得在 Dispose 中取消订阅。

@inject CartState Cart
@implements IDisposable

<p>Cart: @Cart.Count items</p>

@code {
    protected override void OnInitialized()
    {
        Cart.OnChanged += OnCartChanged;
    }

    private void OnCartChanged()
    {
        InvokeAsync(StateHasChanged);
    }

    public void Dispose() =>
        Cart.OnChanged -= OnCartChanged;
}

将 CascadingValue 作为状态容器

使用状态服务将根布局包裹在 CascadingValue 中。所有后代组件都可以访问该服务，而无需显式地逐层传递属性。

@* MainLayout.razor *@
@inject CartState Cart

<CascadingValue Value="Cart">
    @Body
</CascadingValue>

@* Any nested component: *@
@code {
    [CascadingParameter]
    public CartState Cart { get; set; } = default!;

    private void Buy(Product p) => Cart.Add(p);
}

Fluxor：Blazor 的 Flux 模式

Fluxor 为 Blazor 引入了 Redux 风格的单向数据流：状态 → 组件 → 操作 → 归约器 → 状态。它非常适合复杂应用。

// dotnet add package Fluxor.Blazor.Web

// State record
[FeatureState]
public record CounterState(int Count = 0);

// Actions
public record IncrementAction(int Amount = 1);

// Reducers
public static class CounterReducers
{
    [ReducerMethod]
    public static CounterState Reduce(CounterState state, IncrementAction action)
        => state with { Count = state.Count + action.Amount };
}

// Registration:
builder.Services.AddFluxor(opt =>
    opt.ScanAssemblies(typeof(Program).Assembly));

在组件中使用 Fluxor

注入 IState<T> 读取状态，注入 IDispatcher 分派操作。InheritsFrom<FluxorComponent>（或使用混入）会自动订阅状态变化。

@inherits FluxorComponent
@inject IState<CounterState> CounterState
@inject IDispatcher Dispatcher

<p>Count: @CounterState.Value.Count</p>
<button @onclick="Increment">+1</button>
<button @onclick="() => Dispatcher.Dispatch(new IncrementAction(5))">+5</button>

@code {
    private void Increment()
        => Dispatcher.Dispatch(new IncrementAction(1));
}

LocalStorage 持久化

通过 JavaScript 互操作使用浏览器的 localStorage，使状态在页面刷新后仍然保留，并在应用启动时恢复状态。

@inject IJSRuntime JS

@code {
    private async Task SaveStateAsync()
    {
        var json = JsonSerializer.Serialize(_state);
        await JS.InvokeVoidAsync("localStorage.setItem", "appState", json);
    }

    protected override async Task OnInitializedAsync()
    {
        var json = await JS.InvokeAsync<string?>("localStorage.getItem", "appState");
        if (json is not null)
            _state = JsonSerializer.Deserialize<AppState>(json) ?? new();
    }

    private AppState _state = new();
}

Blazored.LocalStorage 程序包

Blazored.LocalStorage 程序包为浏览器 localStorage 提供了简洁且类型化的 API，无需手写 JS 互操作调用。

// dotnet add package Blazored.LocalStorage
builder.Services.AddBlazoredLocalStorage();

@inject ILocalStorageService LocalStorage

@code {
    protected override async Task OnInitializedAsync()
    {
        _cart = await LocalStorage.GetItemAsync<List<CartItem>>("cart") ?? new();
    }

    private async Task SaveCartAsync()
    {
        await LocalStorage.SetItemAsync("cart", _cart);
    }

    private List<CartItem> _cart = new();
}

使用 NavigationManager 管理 URL 状态

使用查询参数保存应在页面刷新后继续存在、并且可以加入书签的状态。通过 NavigationManager 和 URI 构建器读取和写入这些参数。

@inject NavigationManager Nav
@page "/products"

@code {
    [SupplyParameterFromQuery] public string? Search { get; set; }
    [SupplyParameterFromQuery] public int Page { get; set; } = 1;

    private void UpdateSearch(string s)
    {
        Nav.NavigateTo(
            Nav.GetUriWithQueryParameters(
                new Dictionary<string, object?>
                {
                    [nameof(Search)] = s,
                    [nameof(Page)]   = 1
                }));
    }
}

实际应用：购物车状态

一个完整的模式：带有事件的作用域 CartState 服务，在状态变化时持久化到 localStorage，并在加载时恢复。

public class CartState
{
    private readonly ILocalStorageService _storage;
    private List<CartItem> _items = new();
    public event Action? OnChanged;

    public CartState(ILocalStorageService storage) => _storage = storage;

    public async Task InitAsync()
    {
        _items = await _storage.GetItemAsync<List<CartItem>>("cart") ?? new();
    }

    public async Task AddAsync(Product p)
    {
        var item = _items.FirstOrDefault(i => i.ProductId == p.Id);
        if (item is not null) item.Quantity++;
        else _items.Add(new CartItem { ProductId = p.Id, Name = p.Name });
        await _storage.SetItemAsync("cart", _items);
        OnChanged?.Invoke();
    }
}

快速检查

对于共享状态有限的简单 Blazor 应用，哪种状态管理方式最合适？

回顾：Blazor 中的状态管理

要点：

作用域服务 + 操作事件：最简单的共享状态方案，适用于大多数应用
用 CascadingValue 包裹根组件，即可在整个应用中访问状态，而无需逐层传递属性
Fluxor：适用于复杂状态逻辑的 Redux 风格单向数据流
使用 IJSRuntime 或 Blazored.LocalStorage 将状态持久化到 localStorage
URL 状态（SupplyParameterFromQuery）：用于可加入书签、可共享的界面状态
始终在 Dispose 中取消事件订阅，以防止内存泄漏

常见问题解答

「Blazor 中的状态管理」课时是免费的吗？

是的 — 「Blazor 中的状态管理」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 C# Academy 课程的其余内容，请升级到 CoddyKit PRO。 C# Academy 课程共包含 4 节课。

「Blazor 中的状态管理」这节课中我会学到什么？

使用服务单例、Fluxor 或级联的 AppState 管理共享状态，使各组件中的 UI 保持一致。你通过在浏览器中直接运行的动手代码来练习 C# Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 C# Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 C# Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Blazor 中的状态管理」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 C# Academy 课中编写并运行代码吗？

能。每节 C# Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 C# Academy