昨天我們提到狀態管理時介紹了 remember 和 mutableStateOf，但在實際開發中，情況往往更加複雜。比如說，專案採用的是 MVVM 架構，那麼如何與 ViewModel 進行溝通或訂閱就變得尤為重要。

ViewModel：負責處理業務邏輯、管理以及儲存與UI相關的資料並且會跟隨畫面生命週期。

要在 Compose 裡面使用 ViewModel 首先要新增依賴

libs.versions.toml

androidx-viewmodel = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version = "2.8.6"}

build.gradle.kts

dependencies {
		.
		.
    implementation(libs.androidx.viewmodel)
		.
		.
}

接下來，我們對昨天的程式進行調整，首先建立一個 ViewModel。在 ViewModel 中，我們使用 StateFlow 與 Compose 結合。因此，定義了兩個 StateFlow 參數：一個用來接收輸入框的變化，另一個負責通知 Text 顯示對應的文字。此外，還建立了兩個對外的方法，一個用來接收輸入框的輸入變化，另一個用來處理按鈕點擊事件。

class MainViewModel : ViewModel() {

    val name: StateFlow<String>
        get() = mName
    val text: StateFlow<String>
        get() = mText

    private var mName = MutableStateFlow("")
    private var mText = MutableStateFlow("")

    fun login() {
        mName.value = mText.value
    }

    fun setText(text: String) {
        mText.value = text
    }
}

在畫面中，我們新增了 ViewModel 參數，並將原本使用的 remember 改為透過 ViewModel 使用 collectAsState 來接收資料變化。

@Composable
fun Greeting(viewModel: MainViewModel = viewModel(), name: String, modifier: Modifier = Modifier) {
    val name by viewModel.name.collectAsState()
    val text by viewModel.text.collectAsState()
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(
            text = "Hello! ${name}",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.bodyMedium
        )
        OutlinedTextField(
            value = text,
            onValueChange = {
                viewModel.setText(it)
            },
            label = { Text("Name") }
        )
        Button(
            onClick = {
                viewModel.login()
            }
        ) {
            Text("Login")
        }
    }
}