Blazor中切换Tabs时如何保持Counter组件的状态？

MudBlazor的MudTabPanel默认会在标签页未激活时销毁内部的子组件实例，当切回tab1时，Counter组件会被重新创建，因此currentCount会重置为初始值0。

方案1：启用TabPanel的KeepAlive属性 #

最简单的处理方式是给包含Counter的MudTabPanel添加KeepAlive="true"，这样标签切换时组件实例会被保留，状态不会丢失：

修改RiskForm.razor中的tab1面板：

<MudTabPanel Text="tab1" KeepAlive="true">
    <Counter />
</MudTabPanel>

其余标签页代码保持不变即可。

方案2：将状态提升到父组件 #

如果需要更灵活的状态管理（比如后续多个组件共享状态），可以把Counter的状态移到父组件RiskForm中，通过组件参数传递给Counter：

修改RiskForm.razor #

@page "/riskform"

<MudTabs Elevation="4" Rounded="true" Centered="true" Color="@Color.Secondary">
    <MudTabPanel Text="tab1">
        <Counter CurrentCount="@_currentCount" OnIncrement="@IncrementCount" />
    </MudTabPanel>
    <!-- 其他标签页代码保持不变 -->
</MudTabs>

@code {
    private int _currentCount = 0;

    private void IncrementCount()
    {
        _currentCount++;
    }
}

修改Counter.razor #

移除内部状态，改为接收父组件的参数和回调：

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<MudTextField @bind-Value="CurrentCount" Label="current count" Variant="Variant.Outlined" />

<button class="btn btn-primary" @onclick="OnIncrement">Click me</button>

@code {
    [Parameter]
    public int CurrentCount { get; set; }

    [Parameter]
    public EventCallback OnIncrement { get; set; }
}

这种方式下，状态由父组件持有，即使Counter组件被销毁重建，也会从父组件获取最新的状态值。

方案3：本地存储持久化（可选） #

如果需要页面刷新后也保留计数器状态，可以使用本地存储来持久化数据：

@page "/counter"
@inject ILocalStorageService LocalStorage

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<MudTextField @bind-Value="currentCount" Label="current count" Variant="Variant.Outlined" />

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    protected override async Task OnInitializedAsync()
    {
        currentCount = await LocalStorage.GetItemAsync<int?>("counterValue") ?? 0;
    }

    private async Task IncrementCount()
    {
        currentCount++;
        await LocalStorage.SetItemAsync("counterValue", currentCount);
    }
}

注意：需先安装Blazored.LocalStorage包，并在Program.cs中注册服务：builder.Services.AddBlazoredLocalStorage();

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