Blazor MAUI跨平台应用文本数据存储及页面自动刷新方案咨询

一、适合你的数据存储方案 #

根据你的移动端动态数据管理场景，推荐以下几种方案：

1. SQLite本地数据库 #

这是移动端本地持久化存储的首选，轻量且适配Blazor MAUI生态。可以通过SQLite-net-pcl包快速集成，支持ORM操作，能轻松管理链接、子链接的层级数据结构。

2. JSON/XML本地文件 #

如果数据结构不算复杂，可将所有链接数据存入JSON文件，读取时反序列化为对象列表。这种方式实现简单，无需数据库操作基础，但数据量较大时查询效率不如SQLite。

3. 嵌入式资源+本地存储结合 #

若存在固定不变的基础链接，可将其打包为嵌入式资源，新增的动态数据存入本地数据库/文件，加载时合并两类数据使用。

二、实现数据库数据更新时自动刷新UI #

Blazor的UI刷新依赖组件状态变化，结合以下方式可实现自动刷新：

核心思路 #

1. 用**状态容器（State Container）**管理全局数据状态，所有组件订阅状态变化事件。
2. 数据操作层完成增删改后，更新状态容器中的数据并触发变化通知。
3. 组件收到通知后自动调用StateHasChanged()刷新UI。

具体实现示例 #

1. 定义数据模型（实现INotifyPropertyChanged）

确保单个数据项变化时能通知UI更新：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class LinkItem : INotifyPropertyChanged
{
    private int _id;
    private string _title;
    private List<SubLinkItem> _subLinks = new();

    public int Id
    {
        get => _id;
        set { _id = value; OnPropertyChanged(); }
    }

    public string Title
    {
        get => _title;
        set { _title = value; OnPropertyChanged(); }
    }

    public List<SubLinkItem> SubLinks
    {
        get => _subLinks;
        set { _subLinks = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class SubLinkItem
{
    public int Id { get; set; }
    public int LinkId { get; set; } // 关联父链接ID
    public string Title { get; set; }
    public string Content { get; set; }
}

2. 创建全局状态容器

public class LinkStateContainer
{
    private List<LinkItem> _links = new();

    public List<LinkItem> Links
    {
        get => _links;
        set
        {
            _links = value;
            NotifyStateChanged();
        }
    }

    // 状态变化通知事件
    public event Action OnChange;

    // 更新数据并触发通知
    public void RefreshLinks(List<LinkItem> newLinks)
    {
        Links = newLinks;
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

3. 注册服务到MAUI依赖注入

在MauiProgram.cs中添加：

// 注册状态容器（单例，全局共享）
builder.Services.AddSingleton<LinkStateContainer>();

// 注册数据库服务（SQLite示例）
builder.Services.AddSingleton(s =>
{
    string dbPath = Path.Combine(FileSystem.AppDataDirectory, "links.db");
    return new LinkDatabase(dbPath);
});

4. 数据库操作层（SQLite示例）

using SQLite;

public class LinkDatabase
{
    private readonly SQLiteConnection _db;

    public LinkDatabase(string dbPath)
    {
        _db = new SQLiteConnection(dbPath);
        // 创建数据表
        _db.CreateTable<LinkItem>();
        _db.CreateTable<SubLinkItem>();
    }

    // 获取所有链接及关联子链接
    public List<LinkItem> GetAllLinks()
    {
        var links = _db.Table<LinkItem>().ToList();
        foreach (var link in links)
        {
            link.SubLinks = _db.Table<SubLinkItem>().Where(s => s.LinkId == link.Id).ToList();
        }
        return links;
    }

    // 添加新链接及子链接
    public void AddLink(LinkItem newLink)
    {
        _db.Insert(newLink);
        foreach (var subLink in newLink.SubLinks)
        {
            subLink.LinkId = newLink.Id;
            _db.Insert(subLink);
        }
    }
}

5. Blazor组件中使用并实现自动刷新

@inject LinkStateContainer StateContainer
@inject LinkDatabase LinkDb
@implements IDisposable

<h1>首页链接</h1>

@foreach (var link in StateContainer.Links)
{
    <div class="mb-4 p-2 border rounded">
        <h3>@link.Title</h3>
        @if (link.SubLinks.Count > 0)
        {
            <ul>
                @foreach (var subLink in link.SubLinks)
                {
                    <li class="mt-1">
                        <button @onclick="@(() => SelectSubLink(subLink))" class="btn btn-link p-0">
                            @subLink.Title
                        </button>
                        @if (_selectedSubLink == subLink)
                        {
                            <p class="mt-1 text-sm">@subLink.Content</p>
                        }
                    </li>
                }
            </ul>
        }
    </div>
}

<button @onclick="@AddNewLink" class="btn btn-primary mt-4">添加新链接</button>

@code {
    private SubLinkItem _selectedSubLink;

    protected override void OnInitialized()
    {
        // 订阅状态变化事件，触发UI刷新
        StateContainer.OnChange += StateHasChanged;
        // 初始化加载数据
        LoadLinks();
    }

    private void LoadLinks()
    {
        var allLinks = LinkDb.GetAllLinks();
        StateContainer.RefreshLinks(allLinks);
    }

    private void SelectSubLink(SubLinkItem subLink)
    {
        _selectedSubLink = subLink;
    }

    private void AddNewLink()
    {
        var newLink = new LinkItem
        {
            Title = $"新链接{DateTime.Now:HHmmss}",
            SubLinks = new List<SubLinkItem>
            {
                new() { Title = "默认子链接", Content = "这是新增的子链接内容" }
            }
        };
        // 写入数据库
        LinkDb.AddLink(newLink);
        // 刷新状态容器，触发UI更新
        LoadLinks();
    }

    // 取消订阅，避免内存泄漏
    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

三、关键注意事项 #

• 状态容器使用单例模式，确保所有组件共享同一数据源。
• 组件实现IDisposable取消订阅事件，防止内存泄漏。
• 异步数据操作场景下，需用await确保状态更新在主线程执行，复杂场景可调用InvokeAsync(StateHasChanged)。

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