浏览器回退时重置Vue值：Inertia结账页加载状态未重置问题

问题根因 #

你的判断完全正确，该问题由Inertia的历史状态缓存机制导致：当你触发外部跳转（到Stripe）时，Inertia会将当前页面的组件状态完整存入浏览器历史记录，用户点击回退按钮时，Inertia会直接恢复缓存的状态，不会重新触发组件的挂载/初始化流程，因此你在生命周期钩子中写的重置逻辑不会生效。

可行解决方案 #

方案1：监听Inertia的inertia:restore事件（最推荐） #

inertia:restore是Inertia专门提供的、用于监听历史记录恢复场景的事件，只要用户通过回退/前进按钮恢复Inertia页面，该事件就会触发，直接在回调中重置加载状态即可。
修改后的代码示例：

<template>
   <div>
      <div v-if="loadingCheckout">Loading</div>
      <button v-if="!loadingCheckout" @click="startPurchase">Checkout</button>
   </div>
</template>
<script>
   import { defineComponent } from 'vue'
   export default defineComponent({
      data() {
        return {
            loadingCheckout: false,
        };
       },
       mounted() {
         // 监听页面恢复事件，重置加载状态
         document.addEventListener('inertia:restore', this.resetLoadingState)
       },
       beforeUnmount() {
         // 组件销毁时移除事件监听，避免内存泄漏
         document.removeEventListener('inertia:restore', this.resetLoadingState)
       },
       methods: {
        resetLoadingState() {
          this.loadingCheckout = false
        },
        startPurchase() {
            this.loadingCheckout = true;
            // Create checkout logic
        }
       }
   })
</script>

方案2：监听原生pageshow事件（兜底方案） #

如果因为框架版本问题无法监听到Inertia的恢复事件，可以用浏览器原生的pageshow事件兜底，该事件在页面每次被展示（包括回退场景）时都会触发：
只需要把方案1的事件监听部分替换为如下代码即可：

mounted() {
  window.addEventListener('pageshow', this.resetLoadingState)
},
beforeUnmount() {
  window.removeEventListener('pageshow', this.resetLoadingState)
}

方案3：提交请求时关闭状态保留 #

如果你的结账逻辑是通过Inertia的post/get方法触发的，可以在请求参数中添加preserveState: false，强制Inertia不保留当前页面的状态到历史记录，回退时会直接初始化组件：

startPurchase() {
  this.loadingCheckout = true;
  this.$inertia.post('/your-checkout-endpoint', {
    // 你的请求参数
  }, {
    preserveState: false
  })
}

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