重置浏览器背面的Vue值

Question

背景

我们有一个结账页面，一旦创建了订单对象，就会重定向到Stripe。由于这是通过API请求进行的，因此需要一点时间。因此，我们需要阻止"；结账"；按钮，所以不能多次单击。

我们目前通过点击按钮时显示加载图标来实现这一点，以实现切换变量值。

该应用程序与Jetstream(w/Inertia)在Laravel中，由于Inertia，我们在重新设置表单成功的值方面受到限制。

问题

除非用户在重定向到Stripe后单击浏览器返回按钮，否则这一切都很好。如果他们这样做，加载图标将保持可见，并且Vue似乎没有将变量的状态重置为false。

示例代码

<template>
<div>
<div v-if="loadingCheckout">Loading</div>
<button v-if="!loadingCheckout" @click="startPurchase">Checkout</button>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
data() {
return {
loadingCheckout: false,
};
},
methods: {
startPurchase() {
this.loadingCheckout = true;
// Create checkout logic
}
}
})
</script>

尝试的解决方案

我们尝试过使用事件重置，如setUp、beforeMount、mounted，但没有任何运气。此外，我们还尝试在设置中使用ref，而不是数据方法，但同样的问题也适用。

我们还尝试使用一种方法来生成数据属性，但问题相同。我还尝试在onSuccess等表单上使用Inertia回调，但这些回调不会被触发，假设这是由于JetStream的干扰。

任何想法都是有帮助的，理想的情况是，我们只能在页面的每次渲染过程中应用这种状态，而不会真正保存在内存中。我认为问题来自Inertia/Vue在浏览器历史记录中存储状态。

Answer 1

为了解决这个问题，我已经不再使用Inertia表单方法https://inertiajs.com/forms#submitting-表单，而是使用了表单助手方法https://inertiajs.com/forms#form-具有工作回调的助手。

已更换

this.$inertia.post(route('purchase.store'));

带有

this.$inertia.form().post(route('purchase.store'), {
onFinish: () => this.loadingCheckout = false,
})

我的代码现在看起来如下：

<template>
<div>
<div v-if="loadingCheckout">Loading</div>
<button v-if="!loadingCheckout" @click="startPurchase">Checkout</button>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
data() {
return {
loadingCheckout: false,
};
},
methods: {
startPurchase() {
this.loadingCheckout = true;
// Create checkout logic

this.$inertia.form().post(route('purchase.store'), {
preserveScroll: true,
onFinish: () => this.loadingCheckout = false,
})
}
}
})
</script>