Blazor中共享静态变量无法在Razor页面同步的解决咨询

为实现不同Razor组件间数据共享，定义了如下静态类：

namespace BlazorTest
{
    public static class General
    {
        public static int number;
    }
}

父Razor页面代码：

@page "/"
<button @onclick="()=>Increase()">Increase</button>
<br />
Here is parent page.
<br />
@General.number
<br />
<Child />

@code{
    protected override void OnInitialized()
    {
        base.OnInitialized();
        General.number = 0;
    }
    void Increase()
    {
        General.number++;
        StateHasChanged();
    }
}

子Razor页面代码：

<button @onclick="()=>Increase()">Increase</button>
<br />
Here is child page.
<br />
@General.number

@code {
    void Increase()
    {
        General.number++;
        StateHasChanged();
    }
}

操作后出现异常：

• 点击子页面按钮四次，页面显示：

Here is parent page.
0
Here is child page.
4

• 点击父页面按钮一次，页面显示：

Here is parent page.
5
Here is child page.
4

需要实现静态类数据在组件间的同步更新。

问题根源 #

静态类的数值本身是全局同步的，但Blazor组件仅在自身状态触发变化时才会重新渲染。你调用的StateHasChanged()只会更新当前点击的组件，其他组件无法感知静态类的数值变化，因此不会自动刷新显示。

解决方案 #

方案1：给静态类添加事件通知机制 #

修改静态类，增加数值变更事件，让所有依赖该数据的组件订阅事件，数值变化时触发组件重新渲染：

namespace BlazorTest
{
    public static class General
    {
        private static int _number;
        // 定义数值变更事件
        public static event Action OnNumberChanged;

        public static int Number
        {
            get => _number;
            set
            {
                if (_number != value)
                {
                    _number = value;
                    // 触发事件通知所有订阅者
                    OnNumberChanged?.Invoke();
                }
            }
        }
    }
}

父组件修改：

@page "/"
<button @onclick="()=>Increase()">Increase</button>
<br />
Here is parent page.
<br />
@General.Number
<br />
<Child />

@code{
    protected override void OnInitialized()
    {
        base.OnInitialized();
        General.Number = 0;
        // 订阅数值变更事件，触发自身重新渲染
        General.OnNumberChanged += () => StateHasChanged();
    }

    void Increase()
    {
        General.Number++;
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        General.OnNumberChanged -= () => StateHasChanged();
    }
}

子组件修改：

<button @onclick="()=>Increase()">Increase</button>
<br />
Here is child page.
<br />
@General.Number

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        General.OnNumberChanged += () => StateHasChanged();
    }

    void Increase()
    {
        General.Number++;
    }

    public void Dispose()
    {
        General.OnNumberChanged -= () => StateHasChanged();
    }
}

方案2：使用依赖注入的单例服务（推荐） #

静态类并非Blazor中状态共享的最佳实践，更推荐使用依赖注入的单例服务，结合事件实现状态同步：

1. 创建状态服务类：

namespace BlazorTest
{
    public class StateService
    {
        private int _number;
        public event Action OnStateChanged;

        public int Number
        {
            get => _number;
            set
            {
                if (_number != value)
                {
                    _number = value;
                    OnStateChanged?.Invoke();
                }
            }
        }
    }
}

2. 在Program.cs中注册为单例：

builder.Services.AddSingleton<StateService>();

3. 父组件代码：

@page "/"
@inject StateService State
<button @onclick="()=>Increase()">Increase</button>
<br />
Here is parent page.
<br />
@State.Number
<br />
<Child />

@code{
    protected override void OnInitialized()
    {
        base.OnInitialized();
        State.Number = 0;
        State.OnStateChanged += () => StateHasChanged();
    }

    void Increase()
    {
        State.Number++;
    }

    public void Dispose()
    {
        State.OnStateChanged -= () => StateHasChanged();
    }
}

4. 子组件代码：

@inject StateService State
<button @onclick="()=>Increase()">Increase</button>
<br />
Here is child page.
<br />
@State.Number

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        State.OnStateChanged += () => StateHasChanged();
    }

    void Increase()
    {
        State.Number++;
    }

    public void Dispose()
    {
        State.OnStateChanged -= () => StateHasChanged();
    }
}

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