如何为含多组件的Blazor页面实现单页状态模式并规范状态对象职责

在Blazor中实现单页状态模式时，状态对象的职责边界有明确的行业共识：让状态对象成为页面状态的唯一可信源，同时封装所有与状态变更相关的业务逻辑，避免页面/组件直接操作状态数据。以下是具体划分标准：

必须由状态对象承担的职责 #

• 状态数据存储：所有页面及子组件需要用到的状态（如你的EditMode、Matter、PaymentDetails、MatterStatuses）都应放在状态对象中，且属性的set访问器需设为private，禁止外部直接修改。
• 状态初始化逻辑：比如你在LoadMatterDetails中处理的路由参数解析、初始数据加载，这些属于状态初始化的核心逻辑，必须封装在状态对象内。
• 状态变更的业务逻辑：所有修改状态的操作（切换编辑模式、更新Matter信息、刷新支付详情等）都要通过状态对象的方法执行，比如新增ToggleEditMode、UpdateMatter等方法，确保状态变更逻辑集中可控。
• 依赖服务调用：与状态相关的服务调用（如调用matterDetailsService获取数据）应放在状态对象中，页面只负责触发这些方法，不直接与服务交互。
• 状态变更通知：实现INotifyPropertyChanged接口，在状态属性变更时触发PropertyChanged事件，让绑定该状态的组件自动更新UI，无需页面手动调用StateHasChanged。

不应放入状态对象的职责 #

• UI渲染逻辑：比如判断显示编辑表单还是详情视图、弹窗显示隐藏控制，这些属于页面/组件的UI决策逻辑，应留在Razor页面中。
• DOM操作：状态对象完全不涉及任何DOM相关操作，Blazor的UI更新应通过状态绑定自动完成。
• 跨页面全局状态逻辑：如果是多个页面共享的全局状态，应放在IAppState这类全局状态对象中，页面状态对象只负责当前页面的私有状态。

针对你的代码的优化建议 #

1. 限制状态属性的修改权限：将Matter和PaymentDetails的set设为private，通过方法更新：

public Matter Matter { get; private set; } = new();
public MatterPaymentOptionDetails PaymentDetails { get; private set; } = new();

2. 实现INotifyPropertyChanged：让状态对象实现该接口，确保属性变更时通知UI：

public class MatterDetailsState : IMatterDetailsState, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    // 修改EditMode属性，变更时触发通知
    private bool _editMode;
    public bool EditMode 
    { 
        get => _editMode; 
        private set 
        {
            if (_editMode != value)
            {
                _editMode = value;
                OnPropertyChanged(nameof(EditMode));
            }
        }
    }

    // 其他属性同理修改...
}

3. 封装状态变更方法：新增更新Matter的方法，确保所有修改都通过方法执行：

public async Task UpdateMatter(Matter updatedMatter)
{
    await matterDetailsService.UpdateMatterAsync(updatedMatter);
    Matter = updatedMatter;
    OnPropertyChanged(nameof(Matter));
}

总结 #

状态对象的核心价值是集中管控状态数据和状态变更逻辑，页面只需要做三件事：注入状态对象、绑定状态到UI元素、调用状态对象的方法触发状态变更。这种模式既保证了状态的可控性，也让页面逻辑更简洁，符合单一职责原则。

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