Blazor-全局对象-使用SessionStorage



我有一个Blazor应用程序,有多个页面和组件等;在页面和组件之间传递全局对象。例如,一个CUSTOMER对象将在页面之间读取和更新。最好的方法是什么?使用会话存储?

https://learn.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-3.1

或者使用这样的服务?StateManager?

https://blog.jeremylikness.com/blog/blazor-state-management/

想法?Thx提前

根据我的经验,服务非常容易设置和使用,所以我会使用它们。如果您使用的是服务器端,请注意您使用的范围选项:

SCOPED将允许您在页面之间传递数据,但如果启动了新会话(例如单击"刷新"(,则不允许。

SINGLETON将在会话中持续存在,包括其他用户的会话。如果您将singleton用于全局实用程序之外的任何其他应用程序,请确保您有一些验证用户的机制。

我认为你发布的链接很好地总结了这一点。以下是持久状态的常见位置:

  • 服务器端存储
  • URL
  • 浏览器存储
  • 内存状态容器服务

您可以在链接中单独阅读它们。关于sessionStorageMicrosoft注释:

localStorage和sessionStorage可以在Blazor WebAssembly应用程序中使用但只能通过编写自定义代码或使用第三方软件包。

带有以下警告:

用户可能会查看或篡改存储在localStorage和sessionStorage。

对象不适合在URL中传递,从您的问题来看,您似乎不希望每次都从服务器端存储中获取该对象。

因此,我建议使用内存状态容器服务。

示例:

StateContainer.cs

public class StateContainer
{
public string Property { get; set; } = "Initial value from StateContainer";
public event Action OnChange;
public void SetProperty(string value)
{
Property = value;
NotifyStateChanged();
}
private void NotifyStateChanged() => OnChange?.Invoke();
}

Program.Main(Blazor WebAssembly(:

builder.Services.AddSingleton<StateContainer>();

Startup.ConfigureServices(Blazor服务器(:

services.AddSingleton<StateContainer>();

页面/组件1.剃须刀

@page "/Component1"
@inject StateContainer StateContainer
@implements IDisposable
<h1>Component 1</h1>
<p>Component 1 Property: <b>@StateContainer.Property</b></p>
<p>
<button @onclick="ChangePropertyValue">Change Property from Component 1</button>
</p>
<Component2 />
@code {
protected override void OnInitialized()
{
StateContainer.OnChange += StateHasChanged;
}
private void ChangePropertyValue()
{
StateContainer.SetProperty($"New value set in Component 1 {DateTime.Now}");
}
public void Dispose()
{
StateContainer.OnChange -= StateHasChanged;
}
}

共享/组件2.razor

@inject StateContainer StateContainer
@implements IDisposable
<h2>Component 2</h2>
<p>Component 2 Property: <b>@StateContainer.Property</b></p>
<p>
<button @onclick="ChangePropertyValue">Change Property from Component 2</button>
</p>
@code {
protected override void OnInitialized()
{
StateContainer.OnChange += StateHasChanged;
}
private void ChangePropertyValue()
{
StateContainer.SetProperty($"New value set in Component 2 {DateTime.Now}");
}
public void Dispose()
{
StateContainer.OnChange -= StateHasChanged;
}
}

您也可以跨两个以上的组件和任何数量的嵌套组件使用绑定,但必须尊重单向数据流:

  • 更改通知在层次结构中向上流动
  • 新的参数值在层次结构中向下流动

ParentComponent.razor

<h1>Parent Component</h1>
<p>Parent Message: <b>@parentMessage</b></p>
<p>
<button @onclick="ChangeValue">Change from Parent</button>
</p>
<ChildComponent @bind-ChildMessage="parentMessage" />
@code {
private string parentMessage = "Initial value set in Parent";
private void ChangeValue()
{
parentMessage = $"Set in Parent {DateTime.Now}";
}
}

ChildComponent.razor:

<div class="border rounded m-1 p-1">
<h2>Child Component</h2>
<p>Child Message: <b>@ChildMessage</b></p>
<p>
<button @onclick="ChangeValue">Change from Child</button>
</p>
<GrandchildComponent @bind-GrandchildMessage="BoundValue" />
</div>
@code {
[Parameter]
public string ChildMessage { get; set; }
[Parameter]
public EventCallback<string> ChildMessageChanged { get; set; }
private string BoundValue
{
get => ChildMessage;
set => ChildMessageChanged.InvokeAsync(value);
}
private async Task ChangeValue()
{
await ChildMessageChanged.InvokeAsync(
$"Set in Child {DateTime.Now}");
}
}

GrandchildComponent.razor

<div class="border rounded m-1 p-1">
<h3>Grandchild Component</h3>
<p>Grandchild Message: <b>@GrandchildMessage</b></p>
<p>
<button @onclick="ChangeValue">Change from Grandchild</button>
</p>
</div>
@code {
[Parameter]
public string GrandchildMessage { get; set; }
[Parameter]
public EventCallback<string> GrandchildMessageChanged { get; set; }
private async Task ChangeValue()
{
await GrandchildMessageChanged.InvokeAsync(
$"Set in Grandchild {DateTime.Now}");
}
}

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-5.0#绑定两个以上组件

链接到的第一篇文章是如果您正在使用服务器端模型构建Blazor应用程序,您会做什么。如果您使用Blazor客户端(WebAssembly,WASM(模型,它不会给您任何用处。

您链接到的第二篇文章对比了Blazor服务器和Blazor WASM之间的方法。

因此,如果您使用Blazor WebAssembly,您应该为我们提供类似Jeremy Likeness的StateManager的服务(除非您想自己编写一个!(,但如果您使用的是Blazor服务器端,则不需要,您可以使用您发布的Microsoft文章中的建议。

相关内容

  • 没有找到相关文章

最新更新