不确定这个问题的标题是否合适。我正在使用Vue 2,还有点初学(这是我的第三天)。我有一个基本的应用程序与产品页面。我的支付系统是通过条纹支付的。
我在这里使用的是npm模块https://www.npmjs.com/package/vue-stripe
如果我浏览网站并点击几个产品,它似乎创建了越来越多的条纹实例,因为当我进行购买时,它发出的调用次数与我点击产品页面的次数相同。
因此,如果我只访问一次产品页面,那么条带api只会被调用一次,当我第二次访问产品页面时,当我进行购买时,条带api会被调用两次,以此类推。
另一件事是,如果我通过点击浏览器重新加载按钮来刷新页面,它会重置自身,并且只加载Stripe的一个实例。
我的product.vue页面具有以下格式
<html stuff at top>
<script>
import axios from 'axios'
import { StripeCheckout, Bus} from 'vue-stripe'
export default {
components: {
'stripe-checkout': StripeCheckout
},
created () {
Bus.$on('vue-stripe.success', payload => {
// do stuff with payload
})
}
// more logic here
}
</script>
控制台没有给我任何线索,任何帮助都非常感谢。
发布于 2018-02-14 07:49:45
我非常确定这是因为您没有在不同的应用程序状态之间正确地从DOM中删除组件(尽管您认为您确实这样做了)。
v-if
,有时您会注意到它们的条件存在一些冗余。Bus
实例注册相同的even处理程序两次,从而在生命周期中的每个销毁钩子上调用Bus.$off
。示例:
export default {
components: {
StripeCheckout
},
methods: {
onStripeSuccess (payload) {
// do stuff with payload
}
},
created () {
Bus.$on('vue-stripe.success', this.onStripeSuccess)
},
beforeDestroy () {
Bus.$off('vue-stripe.success')
}
}
关于这个的更多信息:
组件生命周期:https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
删除事件侦听器:https://vuejs.org/v2/api/#vm-off
https://stackoverflow.com/questions/48777139
复制相似问题