ViewModel؛ مغز صفحه را جدا کن

همه‌چیز را توی Composable نریز؛ صفحه جای مغز متفکر نیست، جای نمایش است.

درس 4 از 12

چرا ViewModel؟

ViewModel جاییه که منطق صفحه و داده‌هایش را نگه می‌داری. UI فقط نمایش می‌دهد و رویداد می‌فرستد. این جداسازی باعث می‌شود کدت تمیزتر، قابل تست‌تر و کمتر فاجعه‌بار باشد.

نکته کاربردی: در اپ واقعی، صفحه‌ای که هم API بزند، هم دیتابیس بخواند، هم UI بسازد، خیلی زود تبدیل می‌شود به کابوس شب امتحان.

یک ViewModel ساده

StateFlow برای انتشار state به UI عالیه. UI می‌تواند این مقدار را observe کند و با تغییرش خودش را به‌روز کند.

CounterViewModel

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count = _count.asStateFlow()

    fun increase() {
        _count.value++
    }
}

خروجی یا نتیجه اجرا

ViewModel عدد count را نگه می‌دارد و با increase مقدارش زیاد می‌شود.

نکته کاربردی: این الگو برای صفحه‌های واقعی مثل پروفایل، لیست محصولات، سبد خرید و داشبورد کاربرد مستقیم دارد.

نتیجه این درس 🎯

ViewModel منطق را از UI جدا می‌کند. قدم بعدی این است که لیست‌های واقعی را با LazyColumn نمایش بدهیم.

تمرین! 🧠

یک ViewModel بساز که متن جستجو را نگه دارد و تابع updateQuery داشته باشد.

جواب تمرین

class SearchViewModel : ViewModel() {
    private val _query = MutableStateFlow("")
    val query = _query.asStateFlow()

    fun updateQuery(value: String) {
        _query.value = value
    }
}

خروجی جواب

با صدا زدن updateQuery، مقدار query داخل ViewModel تغییر می‌کند.