Jetpack Compose中如何从DataStore初始化remember/mutableStateOf变量

我正在学习Google的DataStore官方Codelab，需求是做一个注册表单：TextField需要从DataStore读取已存储的值作为初始值，点击保存按钮时把TextField的值存入DataStore。

未集成持久化时，我在Composable里用这段代码维护TextField状态：

var registrationCode by remember { mutableStateOf("") }

保存功能已经实现，点击按钮时调用：

onClick = {
    viewModel.setRegistrationCode(registrationCode)
}

现在尝试用StateFlow的uiState初始化本地状态：

var registrationCode by remember { mutableStateOf(uiState.registrationCode) }

但这行不通——uiState是StateFlow，会先返回默认空字符串，之后才会返回DataStore中存储的真实值，导致TextField初始值始终是空的。请问该如何正确从DataStore初始化这个registrationCode？

核心思路是监听StateFlow的数值更新，同步到本地维护的TextField状态，具体实现如下：

@Composable
fun RegistrationForm(viewModel: RegistrationViewModel) {
    // 将ViewModel中的StateFlow转换为Compose可观察的State
    val uiState by viewModel.uiState.collectAsState()

    // 本地维护TextField的编辑状态，初始值先取uiState的默认值
    var registrationCode by remember { mutableStateOf(uiState.registrationCode) }

    // 监听uiState中registrationCode的变化，当DataStore返回真实值时更新本地状态
    LaunchedEffect(uiState.registrationCode) {
        registrationCode = uiState.registrationCode
    }

    // 表单UI部分
    Column {
        TextField(
            value = registrationCode,
            onValueChange = { registrationCode = it },
            label = { Text("注册码") }
        )

        Button(
            onClick = { viewModel.setRegistrationCode(registrationCode) }
        ) {
            Text("保存")
        }
    }
}

原理说明： #

1. collectAsState()会自动订阅uiState这个StateFlow，当DataStore完成数据加载、uiState.registrationCode更新为真实值时，Compose会重组并触发LaunchedEffect。
2. LaunchedEffect的触发条件是参数uiState.registrationCode发生变化，此时会把本地的registrationCode同步为最新的真实值，这样TextField就会显示DataStore中存储的初始值。
3. 本地的mutableStateOf负责处理用户输入的实时更新，保存逻辑保持不变，点击按钮时将当前输入值传给ViewModel存入DataStore即可。

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