Blazor WebAssembly增强导航下PersistentState数据不持久问题

问题场景 #

在.NET 10 LTS的Blazor Web App（WebAssembly交互模式）中，给Counter组件的CurrentCount字段标记[PersistentState(AllowUpdates = true)]后，页面刷新时数据能正常持久化，但通过增强导航（客户端内部路由跳转）进入Counter组件时，CurrentCount始终为null，OnInitializedAsync中的null判断会持续触发随机值赋值逻辑。

原因分析 #

[PersistentState]特性的核心设计是处理服务器预渲染到客户端水合的状态传递，以及页面刷新时的状态恢复流程。而增强导航属于客户端SPA式的局部路由切换，不会触发完整的持久化状态加载机制，因此标记了该特性的属性无法被正确填充。

解决方案 #

方案一：改用LocalStorage存储（推荐） #

直接使用浏览器的LocalStorage来持久化数据，不受导航方式影响，实现步骤如下：

1. 确保项目已引入Microsoft.AspNetCore.Components.WebAssembly.Storage NuGet包
2. 修改Counter组件代码：

@page "/counter"
@rendermode InteractiveWebAssembly
@inject ILocalStorageService LocalStorage

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @CurrentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Increment</button>

@code {
    public int CurrentCount { get; set; }
    private const string StorageKey = "Counter_CurrentCount";

    protected override async Task OnInitializedAsync()
    {
        // 从LocalStorage读取已有数据
        if (await LocalStorage.ContainKeyAsync(StorageKey))
        {
            CurrentCount = await LocalStorage.GetItemAsync<int>(StorageKey);
        }
        else
        {
            // 首次加载时生成随机数并存储
            CurrentCount = Random.Shared.Next(100);
            await LocalStorage.SetItemAsync(StorageKey, CurrentCount);
        }
    }

    private async Task IncrementCount()
    {
        CurrentCount++;
        // 实时更新LocalStorage中的数据
        await LocalStorage.SetItemAsync(StorageKey, CurrentCount);
    }
}

方案二：手动处理增强导航的状态传递（仅内存级持久化） #

如果必须依赖PersistentState，可以通过NavigationManager手动在导航时传递状态，缺点是页面刷新后状态会丢失：

@page "/counter"
@rendermode InteractiveWebAssembly
@inject NavigationManager NavManager

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @CurrentCount</p>

@code {
    [PersistentState(AllowUpdates = true)]
    public int? CurrentCount { get; set; }
    private const string StateKey = "CounterState";

    protected override async Task OnInitializedAsync()
    {
        // 检查是否是增强导航带来的状态
        if (NavManager.TryGetQueryString(StateKey, out string? stateValue) && int.TryParse(stateValue, out int savedCount))
        {
            CurrentCount = savedCount;
        }
        else if (CurrentCount == null)
        {
            CurrentCount = Random.Shared.Next(100);
        }
    }

    // 在组件销毁前，需配合主动跳转逻辑将状态作为查询参数传递
    public override void Dispose(bool disposing)
    {
        if (disposing && CurrentCount.HasValue)
        {
            // 示例：跳转时拼接状态参数
            // NavManager.NavigateTo($"/counter?{StateKey}={CurrentCount}");
        }
        base.Dispose(disposing);
    }
}

这种方式需要在所有跳转到Counter的地方手动拼接状态参数，灵活性较差，因此更推荐方案一。

内容的提问来源于stack exchange，提问作者CrossWords