Vue js 多个模块实例答案

【问题标题】：Vue js multiple instances of moduleVue js 多个模块实例
【发布时间】：2018-02-13 23:05:57
【问题描述】：

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

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

如果我浏览该网站并点击一些产品，它似乎正在创建越来越多的 Stripe 实例，因为当我去购买时，它发出的调用次数与我点击的次数相同在产品页面上。

因此，如果我只访问一次产品页面，stripe api 只会被调用一次，在我第二次访问产品页面时，stripe 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>

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

【问题讨论】：

我不确定我是否理解这个问题，如果没有更多代码（例如如何使用标签），它看起来很难理解，但我可以建议调试。您可以将debugger 行添加到代码中以调试关键部分，例如“vue-stripe.success”事件的处理程序。您还使用 VueJS chrome 扩展，这对于调试很方便。祝你好运。

标签： vue.js vuejs2 vue-component

【解决方案1】：

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

检查您的v-ifs，有时您会注意到他们的条件有些冗余。
确保您不允许Bus 实例两次注册同一个偶数处理程序，从而在生命周期中的每个销毁挂钩上调用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/api/#vm-off

【讨论】：