如何使用Navigation 3将ViewModel作用域限定在多个Composable中

我完全理解你现在的困扰——在Navigation 3里想让同一个ViewModel在两个不同的路由Composable中共用，目前用局部变量存ViewModelStoreOwner的方式确实不太稳妥，手动保存的方式很容易在栈变化时出现失效、内存泄漏等问题。毕竟Navigation 2里每个BackStackEntry本身就是ViewModelStoreOwner，可以直接复用，但Navigation 3改用了基于键（Keys）的设计，确实需要调整思路。

其实Navigation 3本身提供了对应的机制来实现跨路由的ViewModel共享，下面给你两种靠谱的实现方案：

方案一：直接创建共享的ViewModelStoreOwner #

适合简单的两个页面共享场景，我们可以在导航的顶层记住一个全局的ViewModelStoreOwner，让两个路由的Composable都使用这个实例：

setContent {
    val backStack = remember { mutableStateListOf<Any>(RouteA) }
    // 记住一个共享的ViewModelStoreOwner，生命周期和整个导航组件绑定
    val sharedViewModelStoreOwner = remember {
        object : ViewModelStoreOwner {
            private val store = ViewModelStore()
            override val viewModelStore: ViewModelStore
                get() = store
        }
    }

    NavDisplay(
        backStack = backStack,
        onBack = { backStack.removeLastOrNull() },
        entryDecorators = listOf(
            rememberSceneSetupNavEntryDecorator(),
            rememberSavedStateNavEntryDecorator(),
            rememberViewModelStoreNavEntryDecorator()
        ),
        entryProvider = { key ->
            when (key) {
                is RouteA -> NavEntry(key) {
                    ContentGreen(
                        viewModelStoreOwner = sharedViewModelStoreOwner,
                        title = "Welcome to Nav3"
                    ) {
                        Button(onClick = { backStack.add(RouteB("123")) }) {
                            Text("Click to navigate")
                        }
                    }
                }
                is RouteB -> NavEntry(key) {
                    ContentUuuu(
                        viewModelStoreOwner = sharedViewModelStoreOwner,
                        title = "Route id: ${key.id} "
                    )
                }
                else -> error("Unknown route: $key")
            }
        }
    )
}

这样RouteA和RouteB的Composable都会从同一个ViewModelStore中获取UuuViewModel，自然就能共用同一个实例了。

方案二：使用嵌套导航的父级作用域 #

如果你的场景更复杂（比如后续可能需要更多页面共享同一个ViewModel），更推荐用Navigation 3的嵌套导航特性，创建一个父级作用域路由，让需要共享ViewModel的页面作为子路由：

// 先定义路由结构，新增一个父级作用域路由
sealed class Route {
    object SharedScope : Route()
    object RouteA : Route()
    data class RouteB(val id: String) : Route()
}

setContent {
    val backStack = remember { mutableStateListOf<Any>(Route.SharedScope) }
    // 父作用域下的子页面栈
    val childBackStack = remember { mutableStateListOf<Any>(Route.RouteA) }

    NavDisplay(
        backStack = backStack,
        onBack = { backStack.removeLastOrNull() },
        entryDecorators = listOf(
            rememberSceneSetupNavEntryDecorator(),
            rememberSavedStateNavEntryDecorator(),
            rememberViewModelStoreNavEntryDecorator()
        ),
        entryProvider = { key ->
            when (key) {
                is Route.SharedScope -> NavEntry(key) {
                    // 获取父级作用域的ViewModelStoreOwner
                    val parentViewModelStoreOwner = LocalViewModelStoreOwner.current!!
                    // 嵌套子导航
                    NavDisplay(
                        backStack = childBackStack,
                        onBack = {
                            if (childBackStack.size > 1) {
                                childBackStack.removeLastOrNull()
                            } else {
                                // 子栈为空时退出父作用域
                                backStack.removeLastOrNull()
                            }
                        },
                        entryDecorators = listOf(
                            rememberSceneSetupNavEntryDecorator(),
                            rememberSavedStateNavEntryDecorator(),
                            rememberViewModelStoreNavEntryDecorator()
                        ),
                        entryProvider = { childKey ->
                            when (childKey) {
                                is Route.RouteA -> NavEntry(childKey) {
                                    ContentGreen(
                                        viewModelStoreOwner = parentViewModelStoreOwner,
                                        title = "Welcome to Nav3"
                                    ) {
                                        Button(onClick = { childBackStack.add(Route.RouteB("123")) }) {
                                            Text("Click to navigate")
                                        }
                                    }
                                }
                                is Route.RouteB -> NavEntry(childKey) {
                                    ContentUuuu(
                                        viewModelStoreOwner = parentViewModelStoreOwner,
                                        title = "Route id: ${childKey.id} "
                                    )
                                }
                                else -> error("Unknown child route: $childKey")
                            }
                        }
                    )
                }
                else -> error("Unknown route: $key")
            }
        }
    )
}

这种方式的优势在于，ViewModel的生命周期和父级作用域的NavEntry绑定，只要父级路由在栈中，ViewModel就会保持存活，子页面之间切换也能稳定共享同一个实例，更符合Navigation 3的设计理念。

为什么你原来的方式不可靠？ #

你之前用局部变量localstoreowner保存RouteA的ViewModelStoreOwner，存在两个核心问题：

1. 生命周期不匹配：当RouteA被弹出栈后，对应的ViewModelStoreOwner已经被销毁，但你的局部变量还保留着引用，可能导致内存泄漏或者ViewModel失效。
2. 状态不可控：如果导航栈有复杂的变化（比如多次进出RouteA），局部变量会被多次覆盖，无法保证始终指向正确的作用域实例。

内容来源于stack exchange