Vue js模块的多个实例
Vue js模块的多个实例
提问于 2018-02-14 07:05:58
不确定这个问题的标题是否合适。我正在使用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>控制台没有给我任何线索，任何帮助都非常感谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48777139
复制相关文章
相似问题