如何保留Blazor 应用组件中的数据？

Question

大家好。

在 Blazor 应用程序的默认模板中，单击按钮时，计数变量将增加 1。但是当导航到其他组件然后返回计数器组件时，计数值将重置为 0，我需要在此默认模板中做哪些更改来修复此问题，以便在返回时保留值。

谢谢。

注意: 该问题整理于：Blazor default template application issue。

Answer 1

你好，

可以使用内存中状态容器服务或浏览器存储利用（ASP.NET Core 数据保护)用于 localStorage and sessionStorage来保留数据。

例如，使用内存中状态容器服务：

1. 在 Models 文件夹中创建 StateContainer 类（此示例是 Blazor WebAssembly 应用）：

public class StateContainer
    {
        private int? savedCounter;
 
        public int Counter
        {
            get => savedCounter ?? 0;
            set
            {
                savedCounter = value;
                NotifyStateChanged();
            }
        }
 
        public event Action? OnChange;
 
        private void NotifyStateChanged() => OnChange?.Invoke();
    }

2. 在 program.cs 文件中注册 StateContainer 类：

builder.Services.AddSingleton<StateContainer>();

3. 在计数器组件（Counter.Razor），请使用以下代码：

@page "/counter"

@using BlazorWebAssemblyApp2.Models;
@implements IDisposable
@inject StateContainer StateContainer

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
 
<p role="status">Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    private int currentCount = 0;
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
 
        currentCount = StateContainer.Counter;
    }
    private void IncrementCount()
    {
        currentCount++;
        StateContainer.Counter = currentCount;
    }
    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

结果如下：

如果应用程序是 Blazor 服务器应用程序，也可以使用上述代码，或者参考以下代码使用 ProtectedBrowserStorage 保留数据，也会得到相同的结果。

@page "/counter"
 
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    private int currentCount = 0;
 
    protected override async Task OnInitializedAsync()
    {
        var result = await ProtectedSessionStore.GetAsync<int>("count");
        currentCount = result.Success ? result.Value : 0;
    }
 
    private async void IncrementCount()
    {
        currentCount++;
        await ProtectedSessionStore.SetAsync("count", currentCount);
    }
}

有关详细信息，请参阅 ASP.NET Core Blazor 状态管理。

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。 注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。