InertiaJS preserveState:false开发生效生产环境不生效问题

API 探路者

2026-8-27

问题描述

代码包含多个通过v-if控制显隐的条件渲染组件，搭配标签菜单控制当前激活展示的组件；每个组件内置独立业务逻辑，用户点击组件内按钮后会加载对应模块的内容。

生产环境存在异常表现：

先完整加载组件1的全部内容后，切换到组件2再切回组件1，即便Inertia.get()请求中明确配置了{preserveState: false}，组件1仍会保留之前的状态，直接展示已经加载过的全部内容
仅切换激活标签时也会触发相同的状态残留问题
上述逻辑在开发环境下运行正常，preserveState: false配置可正常生效

复现代码

<template>
    <div>
        <section>
            <navigation-element  :element="element" v-for="element in navigation" @clicked="changeActive" /> 
        </section>


        <!-- lesson's tabs -->
        <lintro class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('intro') >= 0" />
        <ldictionary class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('dictionary') >= 0"  />
        <lclass class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('class') >= 0"  />
        <ltools class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('tools') >= 0"  />
        <lexam class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('exam') >= 0"  />
        <lpractice class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('practice') >= 0"  />
    </div>
</template>
<script setup>
    import {ref, computed, onMounted, reactive} from 'vue'
    import { Inertia } from '@inertiajs/inertia'
    import navigationElement from '@/Pages/modules/navigationElement.vue'

    import lintro from '@/Pages/lesson/_intro.vue'
    import ldictionary from '@/Pages/lesson/_dictionary.vue'
    import lclass from '@/Pages/lesson/_class.vue'
    import ltools from '@/Pages/lesson/_tools.vue'
    import lexam from '@/Pages/lesson/_exam.vue'
    import lpractice from '@/Pages/lesson/_practice.vue'


    const props = defineProps(['lesson', 'tab', 'course', 'course_progress'])
    const navigation = ref([
        {id: 0, action: 'intro', name: 'Intro'},
        {id: 1, action: 'dictionary', name: 'Dictionary'},
        {id: 2, action: 'class', name: 'Class'},
        {id: 3, action: 'tools', name: 'Tools'},
        {id: 4, action: 'exam', name: 'Quizess'},
        {id: 5, action: 'practice', name: 'Assignment'},
    ])

    function changeActive(input) {
        Inertia.get(window.location.pathname, {tab: input.action}, {preserveState: false, preserveScroll: true });
    }
</script>

问题原因

生产环境下Vue默认开启同层级组件复用优化：当多个同位置、同类型的组件通过v-if切换显隐时，Vue不会真的卸载旧组件、挂载新组件，而是直接复用现有组件实例，仅更新传入的props，这就会导致组件内部的本地状态完全保留。开发环境下Vue的优化策略、热更新机制会打破这种复用，因此不会出现状态残留。
Inertia的preserveState: false配置仅控制页面级Inertia状态的重置逻辑，不会干预Vue框架本身的子组件复用行为，因此无法解决子组件本地状态残留的问题。

解决方案

给所有条件渲染的tab组件绑定全局唯一的key属性，强制Vue在key变化时销毁旧组件实例、重新挂载新组件，彻底避免复用导致的状态残留，修改示例如下：

<!-- 给每个组件添加和tab对应的唯一key -->
<lintro key="intro" class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('intro') >= 0" />
<ldictionary key="dictionary" class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('dictionary') >= 0"  />
<lclass key="class" class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('class') >= 0"  />
<ltools key="tools" class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('tools') >= 0"  />
<lexam key="exam" class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('exam') >= 0"  />
<lpractice key="practice" class="" :lesson="lesson" :course="course" v-if="$page.url.indexOf('practice') >= 0"  />

该方案在开发和生产环境表现一致，是Vue官方推荐的强制组件重建的实现方式。

注意：不要依赖v-if的显隐切换触发组件重置，只要没有唯一key标识，Vue在生产环境下随时可能复用组件实例导致状态污染。

内容的提问来源于stack exchange，提问作者Андрей Измайлов