Blazor - الطرق البسيطة لإدارة الحالة (في الذاكرة

🔹 Blazor - الطرق البسيطة لإدارة الحالة (في الذاكرة)

في تطبيقات Blazor، إدارة الحالة (State Management) تعني الاحتفاظ بالبيانات بين تغيّرات واجهة المستخدم (UI) أو حتى بين الصفحات المختلفة. في هذا الدرس، سنبدأ بأبسط طريقة: **تخزين الحالة في الذاكرة داخل نفس المكون أو عبر خدمة Singleton.**

---

🧠 ما المقصود بالحالة في Blazor؟

الحالة تعني: بيانات نحتاج الاحتفاظ بها أثناء تفاعل المستخدم مع التطبيق، مثل:

  • عدد عناصر في السلة
  • إعدادات المستخدم المؤقتة
  • نتائج بحث
---

🔹 1. تخزين الحالة داخل نفس المكون

هذه الطريقة تُستخدم عندما لا تحتاج لمشاركة البيانات مع مكونات أخرى.


@page "/counter"

<h4>🔢 العداد: @count</h4>
<button class="btn btn-primary" @onclick="Increment">زيادة</button>

@code {
    private int count = 0;

    void Increment()
    {
        count++;
    }
}

👆 هذه الحالة ستضيع عند إعادة تحميل الصفحة أو الانتقال إلى صفحة أخرى.

---

🔹 2. استخدام خدمة Singleton لحفظ الحالة

إذا أردت الاحتفاظ بالحالة أثناء التنقل بين الصفحات، يمكنك استخدام خدمة Singleton.

✅ 1. إنشاء كلاس لحالة المستخدم:


public class AppState
{
    public int Counter { get; set; } = 0;
}

✅ 2. تسجيله في Program.cs


builder.Services.AddSingleton<AppState>();

✅ 3. استخدامه في أي مكون:


@inject AppState State

<h4>📦 قيمة العداد: @State.Counter</h4>
<button class="btn btn-success" @onclick="Add">زيادة</button>

@code {
    void Add()
    {
        State.Counter++;
    }
}

👈 بهذه الطريقة، سيظل العداد محتفظًا بقيمته حتى بعد الانتقال بين الصفحات.

---

💡 ملاحظات مهمة

  • استخدام Singleton يُبقي البيانات في الذاكرة ما دام التطبيق قيد التشغيل.
  • لكن إذا تم عمل Refresh للصفحة (F5)، يتم فقدان البيانات لأن الذاكرة يتم تصفيرها.
  • لحفظ البيانات حتى بعد الإغلاق، استخدم LocalStorage أو Protected Browser Storage (سنتطرق إليها لاحقًا).
---

✅ خلاصة الدرس

الطرق البسيطة لإدارة الحالة تعتمد على استخدام الذاكرة فقط: إما داخل المكون، أو باستخدام خدمة Singleton. وهي مفيدة في التطبيقات الصغيرة أو المتوسطة.

تعليقات

المشاركات الشائعة من هذه المدونة

C# - Arrays

Entity Framework - ما هو ORM؟ ونبذة عن Dapper وNHibernate

Entity Framework - مقدمة عن Entity Framework