InertiaJS二次刷新或返回页面时remember记忆状态丢失问题

云原生阿岚

2026-8-30

问题核心成因

Inertia.remember 默认的存储作用域和当前页面组件、访问历史条目强绑定，你传入的第二个参数'active'只是状态本身的键名，不是全局唯一的存储标识。Inertia内部会自动拼接当前页面的唯一标识生成完整存储key，当你导航到其他无关页面时，原页面对应的历史记忆状态会被Inertia的状态回收机制清理，返回时自然读不到值，直接返回undefined。
二次刷新状态丢失的原因很直接：你只在特定业务方法触发时才会调用remember写入状态，组件初始化时执行完restore恢复值之后，没有把恢复后的值重新写回存储。首次刷新时上一次会话存的值还在历史栈有效期内可以读取，第二次刷新时如果上一次页面加载后没有触发过存值的业务方法，Inertia会判定该记忆状态未更新、属于过期数据，直接在页面卸载时清理掉。
你猜测的“mounted钩子里同步执行remember”方向没错，但只在mounted写一次远远不够——响应式属性后续的变更不会自动同步到remember存储，只要值变了没手动存，刷新后还是会丢。

正确实现方案

Inertia对Vue Options API做了适配，优先用官方提供的内置能力，不用自己手动写restore/remember逻辑，能避免90%的状态丢失问题：

方案1：使用组件级remember配置项（推荐）
配置后Inertia会自动跟踪指定data属性的变化，自动同步存储、自动在组件初始化时用记忆值覆盖默认值，跨页面导航返回、多次刷新都不会丢状态：

export default {
  // 声明需要持久化的data属性
  remember: {
    data: ['active']
  },
  data() {
    return {
      // 直接写默认值即可，记忆值存在时会自动覆盖
      active: 4
    }
  },
  methods: {
    selectBooth(booth) {
      // 正常更新属性即可，不用额外调用Inertia.remember
      this.active = booth
      // 其余业务逻辑正常编写
    }
  }
}

方案2：手动调用API实现（适合需要自定义全局存储的场景）
如果一定要手动控制存储逻辑，必须补全三个关键逻辑：一是恢复值后立刻回写存储，二是监听属性变化实时同步，三是使用全局唯一key避免被页面作用域回收：

export default {
  data() {
    return {
      active: 4
    }
  },
  created() {
    // 使用自定义全局唯一key读取，避免和其他页面的状态键冲突
    this.active = Inertia.restore('site_booth_active_state') ?? 4
    // 恢复后立刻写入一次，保证存储中始终有有效值
    Inertia.remember(this.active, 'site_booth_active_state')
  },
  watch: {
    // 监听属性变化，每次变更都同步到存储
    active(newVal) {
      Inertia.remember(newVal, 'site_booth_active_state')
    }
  }
}

常见使用疏漏

错误认为传入remember的第二个参数是全局存储key，忽略了默认状态的页面级作用域限制，导致跨页面导航后状态被回收
仅在特定业务触发时写入存储，没有覆盖初始化恢复、属性变更的全流程同步，导致存储值过期被清理
没有使用Inertia为Vue提供的内置remember配置，手动编写生命周期逻辑时容易遗漏同步步骤，引发状态丢失

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