Blazor 状态管理

Counter
 
Current count: @currentCount
 Click me

private int currentCount = 0; private void IncrementCount() { currentCount++; }

public class CounterService { public int Count { get; private set; } public void Increment() { Count += 1; } }

在Startup.cs以下位置注册服务：

public void ConfigureServices(IServiceCollection services) { services.AddSingleton 
    
      (); } 
    

…然后删除@code块中的代码Counter.razor，注入计数器服务并直接进行数据绑定：

@inject CounterService Svc 
Counter
 
Current count: @Svc.Count
 Click me

当组件被销毁/重新创建时，该服务将保留在内存中，即使在导航时也保持一致的计数。这是维持状态的第一步。参考应用程序以此方式注册主视图模型。

window.stateManager = { save: function (key, str) { localStorage[key] = str; }, load: function (key) { return localStorage[key]; } };

它包含在Blazor WebAssembly项目的index.html和Blazor Server项目的_Host.cshtml的根目录中。包括共享资产(shared assets)就像使用路径一样简单：

@using Microsoft.JSInterop; @using System.Text.Json; @inject IJSRuntime JsRuntime @inject IHealthModel Model

模板只是包装子组件，并在加载状态时呈现它们。

@if (hasLoaded) { @ChildContent } else { 
Loading...
 }

初始化组件后，代码尝试从缓存中加载视图模型：

string vm; try { vm = await JsRuntime.InvokeAsync 
    
      ("stateManager.load", nameof(HealthModel)); } catch(InvalidOperationException) { return; } 
    

在Blazor服务器中，组件已在服务器上预渲染。JavaScript不可用，因此interop调用将抛出InvalidOperationException。这是第一次被发现。第二个调用是从客户端进行的，并且如果缓存了viewmodel，它将成功。从高速缓存加载视图模型的JSON后，将对其进行反序列化，并将属性移至全局视图模型实例。

var viewModel = JsonSerializer.Deserialize 
    
      (vm); if (viewModel != null) { isDeserializing = true; Model.AgeYears = viewModel.AgeYears; Model.HeightInches = viewModel.HeightInches; Model.IsFemale = viewModel.IsFemale; Model.IsImperial = viewModel.IsImperial; Model.WeightPounds = viewModel.WeightPounds; isDeserializing = false; } 
    

isDeserializing标志对于避免无限循环很重要，正如您在下一个注册属性更改通知的代码中所看到的：

Model.PropertyChanged += async (o, e) => { if (isDeserializing) { return; } var vmStr = JsonSerializer.Serialize(((HealthModel)Model)); await JsRuntime.InvokeAsync

如果视图模型上的属性发生更改，则视图模型将被序列化并存储在缓存中。当由于初始加载而触发了属性更改时，将跳过此操作（因此会出现该isDeserializing标志，否则它将在尝试反序列化时进行序列化）。现在该组件可以使用了！Blazor.ServerLocal和Blazor.WasmLocal都是的帮助类，它在App.razor中的实现方式相同：

 
     
      
       
        
       
       
        
        
Sorry, there's nothing at this address.
 
        
       
      
    

通过包装路由器，状态管理无需编写其他代码即可处理应用程序中的所有页面和组件。您可以打开浏览器开发人员工具并导航到应用程序“本地存储”，以观察值在更新表单时的变化。

public async Task InitAsync() { _initializing = true; var vmJson = await _client.GetStringAsync(_config.Url); var vm = JsonSerializer.Deserialize 
    
      (vmJson, _options); _model.AgeYears = vm.AgeYears; _model.HeightInches = vm.HeightInches; _model.IsFemale = vm.IsFemale; _model.IsMetric = vm.IsMetric; _model.WeightPounds = vm.WeightPounds; _initializing = false; } 
    

该代码与客户端缓存方法非常相似，但是从API调用而不是本地缓存中检索模型。属性更改处理程序序列化模型并将模型发布到服务器：

private async void Model_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) { if (_initializing || _config == null) { return; } var vm = JsonSerializer.Serialize(_model); var content = new StringContent(vm); content.Headers.ContentType = new MediaTypeHeaderValue("application/json"); await _client.PostAsync(_config.Url, content); }

设置BlazorState.WasmRemote.Server为启动项目并运行它以查看实际效果。您可能需要更新在.Client项目中IStateServiceConfig的Startup.cs实现中的正确URL（因为端口可能不同）。在运行解决方案的情况下，打开“网络”选项卡，并在更新表单时记下调用。