为什么页面不保存数据？答案

【问题标题】：Why doesnt the page preserve the data?为什么页面不保存数据？
【发布时间】：2020-09-26 01:08:02
【问题描述】：

所以我目前正在查看 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++;
    }
}

【问题讨论】：

对我来说似乎是合法的。它被定义为局部变量，因此假设在页面加载时发生任何类型的新实例创建，重置行为是“预期的”。有一些关于如何保存/保存数据的示例吗？
参见gist.github.com/SteveSandersonMS/…，它解释了如何存储和恢复状态。
我只是想它会保留数据。假设我正在更改按钮的背景，并且我希望在浏览不同选项卡时保存它。不会在那个时候改回默认值吗？就像 int 一样？
我认为这也是 SPA 理念的一部分
SPA 并不意味着视图是单例的。如果创建了新实例，则会创建一个新实例。任何旧的实例状态都被丢弃（也许视图可以创建为单例耸耸肩）。

标签： c# asp.net .net blazor

【解决方案1】：

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

希望这会有所帮助...

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

组件根据需要创建/销毁，即使在单个页面中显示/隐藏。因此，它们持有的任何状态都会随着消失的组件一起丢失。

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

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

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

【讨论】：