页面为什么不保留数据？

Question

因此，我当前正在查看Blazor示例项目。“计数器”更具体，当我增加页面上的值，然后单击Web应用程序上的其他选项卡时，假设“获取”数据”选项卡，它拉起了天气，然后我返回，增加的值又回到了0。为什么呢？为什么不保存？

这是导航菜单

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
    </ul>
</div>

还有柜台

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Answer 1

这是设计使然。当“计数器页面组件”超出范围时，它将被销毁，而当您返回时，将重新创建它。但是您可以缓存其状态（计数值）并在返回页面时读取最后一个值。您可以将状态值保存在本地存储或会话存储（JavaScript Api）中，您可以直接使用Blazor的JSInterop功能使用状态值，或者更好的是，使用库设计与Blazor社区创建的Blazor一起使用，甚至通过开拓者队（推荐）

希望这对您有帮助...

Answer 2

即使需要显示/隐藏组件，也可以根据需要创建/销毁它们。因此，它们所拥有的任何状态都会与消失的组件一起丢失。

组件设计用于呈现视觉效果和管理交互。他们可以保持某种状态，但是在自己的一生中不能保持状态。为此，您需要将状态存储在其他地方，例如在服务中。

我写了Fluxor来处理这种情况：https://github.com/mrpmorris/fluxor

有人在这里创建了一个视频：https://www.youtube.com/watch?v=k_c-ErPaYa8

Answer 3

我认为您正在寻找的是国家管理。 当您为每个用户更改状态并想要保留状态时，则需要保存状态。

有几种方法（例如缓存）可以执行此操作， 看看here