BlazorState 项目教程

1. 项目介绍

BlazorState 是一个用于 Blazor WebAssembly 和 Blazor Server 应用的状态管理示例项目。该项目旨在展示如何在 Blazor 应用中更好地管理状态。它基于官方的 ASP.NET Core Blazor 状态管理文档，并提供了多种状态管理解决方案的示例。

2. 项目快速启动

2.1 克隆项目

首先，克隆 BlazorState 项目到本地：

git clone https://github.com/JeremyLikness/BlazorState.git

2.2 启动项目

进入项目目录并启动 Blazor WebAssembly 项目：

cd BlazorState/BlazorState.Wasm
dotnet run

或者启动 Blazor Server 项目：

cd BlazorState/BlazorState.Server
dotnet run

2.3 运行应用

启动应用后，打开浏览器访问 http://localhost:5000（默认端口），你将看到一个健康统计应用的界面。你可以修改输入值来查看 BMI、BMR 和目标心率的变化。

3. 应用案例和最佳实践

3.1 使用本地存储保存状态

BlazorState 项目展示了如何使用本地存储（localStorage）来保存应用状态。在 BlazorState.WasmLocal 项目中，状态会在页面刷新或浏览器关闭后仍然保留。

关键代码片段：

// StorageHelper.razor
@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnInitializedAsync()
    {
        try
        {
            var serializedState = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "appState");
            if (!string.IsNullOrEmpty(serializedState))
            {
                var state = JsonSerializer.Deserialize<ViewModel>(serializedState);
                // 恢复状态
            }
        }
        catch (Exception)
        {
            // 忽略错误
        }
    }

    private async Task SaveState()
    {
        var serializedState = JsonSerializer.Serialize(ViewModel);
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "appState", serializedState);
    }
}

3.2 使用服务器存储保存状态

在 BlazorState.WasmRemote 项目中，状态被保存到服务器端。服务器使用一个内存中的字典来存储状态，并通过 API 进行访问。

关键代码片段：

// StateService.cs
public class StateService
{
    private readonly HttpClient _httpClient;
    private readonly ViewModel _viewModel;

    public StateService(HttpClient httpClient, ViewModel viewModel)
    {
        _httpClient = httpClient;
        _viewModel = viewModel;
        _viewModel.PropertyChanged += OnPropertyChanged;
    }

    private async void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        await SaveStateAsync();
    }

    public async Task SaveStateAsync()
    {
        var response = await _httpClient.PostAsJsonAsync("api/state", _viewModel);
        response.EnsureSuccessStatusCode();
    }

    public async Task<ViewModel> InitAsync()
    {
        var response = await _httpClient.GetFromJsonAsync<ViewModel>("api/state");
        return response;
    }
}

4. 典型生态项目

4.1 Blazor-State

Blazor-State 是一个基于 MediatR 的状态管理库，实现了 Flux 模式。它可以帮助你在 Blazor 应用中更高效地管理状态。

4.2 TimeWarp.State

TimeWarp.State 是另一个 Blazor 状态管理库，同样利用 MediatR 管道来实现 Flux 模式。它提供了丰富的功能和示例，帮助开发者更好地理解和使用 Blazor 状态管理。

通过这些生态项目，开发者可以更深入地了解和应用 Blazor 状态管理技术，提升应用的性能和用户体验。