Jetpack Compose：如何使用viewModel+composable保存以前的数据

Question

我是 jetpack Compose 的新手。这是我的问题： 这是背景：我有一个登录进程与两个可组合项一起使用，每个可组合项都是一个屏幕。第一个屏幕是让用户输入电子邮件或电话号码。第二个屏幕是让用户输入验证码。
这是我的问题：我为每个组合创建了两个视图模型。我输入电话号码，然后导航到代码页。当我关闭代码页时，我发现第一页中的数据消失了。我想保留数据，直到登录过程完成。我怎样才能做到这一点。
任何帮助都会有帮助的。谢谢。

我正在使用

compose-destinations

来管理我的路线

这是我的样本：

loginPage.kt:

@Composable
fun LoginLayout(){
   val viewModel = remember { LoginPageData() }
   Column(){
      //here's the page contents
      Button(
      click ={
         // do the jump 
         navigaor.navigate(CodeInputPageDestioation())
      }
      )
   }

}

LoginPageData.kt

class LoginPageData : ViewModel(){
  //some properities
}

CodeInputPage.kt:

@Composable
fun CodeInputLayout(){
   val viewModel = remember { CodeInputData() }
   Column(){
      //here's the page contents
      Button(onclick = {
         navigator.popBackStack()
      }){

      }
   }

}

CodeInputData.kt

class CodeInputData : ViewModel(){
  //some properities
}

就像上面的代码一样。当我导航到 CodeInputPage 时，单击按钮调用

navigator.popBackStack()

我在 LoginPage 中的输入消失了。似乎创建了一个新的 LoginPageData()。

Answer 1

简短回答： 将数据持久化到数据层

长答案： 正如谷歌建议的这里：

您应该将 UI 状态提升到最低的共同祖先

应用于您的实际设计，这意味着您必须将数据深入到数据层或领域层（如果有的话）。如果我没看错的话，您无论如何都需要发送一封带有验证码的电子邮件。这应该由较低层完成。稍后，当用户输入代码并按下验证按钮时，该按钮背后的逻辑应该由您的业务逻辑处理。在这里您需要访问该验证码。我会将所有数据（电子邮件/电话号码和验证码）保存/保留在数据层中。也许 Room 数据库对您来说就足够了，也许您想将数据存储在 firebase 或网络上的其他任何地方，甚至在线和离线。

但你也可以考虑重新设计：

这意味着您可以重新设计为只有一个屏幕和一个视图模型。然后状态将保留在屏幕中。

您可以重新设计，让两个屏幕共享一个视图模型。不确定这是否是好的做法。但是，状态将保留在视图模型中。