【Blazor状态管理】跨页面、跨路由、动态同步数据、自动更新UI 使用【Fluxor】

演示功能说明

在任何页面动态的修改左侧导航栏权限  是否显示

效果预览

 

1、安装包：Fluxor.Blazor.Web

 

 

  <ItemGroup>

    <PackageReference Include="Fluxor.Blazor.Web" Version="5.9.1" />

  </ItemGroup>

 

2、Program.cs 增加

 

var currentAssembly = typeof(Program).Assembly;

builder.Services.AddFluxor(options => options.ScanAssemblies(currentAssembly));

 

3、创建文件夹，和文件

 

3.1、AuthorizationState.cs

 

using Fluxor;

 

namespace BlazorApp1.Store;

 

[FeatureState] // 一定要有这个

public class AuthorizationState

{

    public bool IsAuthorized { get; } // 状态是只读的

 

    private AuthorizationState() { } // 空构造函数也是必须有的

 

    public AuthorizationState(bool isAuthorized)

   {

        IsAuthorized = isAuthorized;

   }

}

3.2、AuthorizationReducers.cs

 

using Fluxor;

 

namespace BlazorApp1.Store;

public static class AuthorizationReducers

{

   [ReducerMethod]

    public static AuthorizationState ReduceAuthorizeAction(AuthorizationState state, AuthorizeAction action)

   {

       return new AuthorizationState(isAuthorized: true);

   }

 

   [ReducerMethod]

    public static AuthorizationState ReduceDeauthorizeAction(AuthorizationState state, DeauthorizeAction action)

   {

       return new AuthorizationState(isAuthorized: false);

   }

}

3.3、AuthorizationActions.cs

 

namespace BlazorApp1.Store;

 

// 留空即可  只是做一个标记用，不需要内容  对应AuthorizationReducers.cs中的2个方法

 

public class AuthorizeAction { } 

public class DeauthorizeAction { } 

4、使用方法

 

比如要动态的显示隐藏导航里的一个按钮

 

NavMenu.razor

@inject IDispatcher Dispatcher

@inject IState<AuthorizationState> AuthorizationState

 

.....

 

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">

    <nav class="flex-column">

        @if (AuthorizationState.Value.IsAuthorized)

       {

            <div class="nav-item px-3">

                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">

                    <span class="oi oi-home" aria-hidden="true"></span> Home

                </NavLink>

            </div>

       }

.....

    </nav>

</div>

 

 

 

@code {

.....

 

 

    protected override void OnInitialized()

   {

       // 内容修改主动触发事件更新页面渲染

        AuthorizationState.StateChanged += OnAuthorizationStateChanged;

   }

 

    private void OnAuthorizationStateChanged(object sender, EventArgs e)

   {

       // 更新页面渲染 一定要用InvokeAsync包裹 

        InvokeAsync(StateHasChanged);

   }

 

    public void Dispose()

   {

       // 页面回收则卸载掉

        AuthorizationState.StateChanged -= OnAuthorizationStateChanged;

   }

}

Counter.razor

@page "/counter"

@inject IState<AuthorizationState> AuthorizationState

@inject IDispatcher Dispatcher

 

...

 

<button @onclick="() => Dispatcher.Dispatch(new AuthorizeAction())">Authorize</button>

<button @onclick="() => Dispatcher.Dispatch(new DeauthorizeAction())">Deauthorize</button>

 

...

 

ok  试试吧 完成了，有了这个简单例子 举一反三  就能搞定很多需求了，比如前端权限管理，跨页面传值什么的