Question

不确定此问题是否适当标题。我正在使用Vue 2和有点菜鸟（这是我的第三天）。我有一个带产品页面的基本应用程序。我的付款系统是通过Stripe。

我在这里使用npm模块https://www.npmjs.com/package/vue-stripe

如果我在网站上浏览并点击几个产品，似乎它正在创建越来越多的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>

控制台没有给我任何线索，任何帮助都非常感激。

Answer 1

我很确定它正在发生，因为你没有在不同应用状态之间正确地从DOM中删除组件（尽管你认为你这样做了）。

检查您的Bus，有时您会注意到他们的条件有些冗余。
请确保您不允许Bus.$off实例两次注册相同的偶数处理程序，从而在生命周期中的每个destroy挂钩上调用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') } }。

示例：

$current % 3 == 0

更多相关内容：

组件生命周期：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

删除事件侦听器：https://vuejs.org/v2/api/#vm-off

Vue js模块的多个实例

1 个答案: