如何在 Vue.js 方法中使用外部 JavaScript 对象答案

【问题标题】：How to use external JavaScript objects in Vue.js methods如何在 Vue.js 方法中使用外部 JavaScript 对象
【发布时间】：2020-01-10 09:56:28
【问题描述】：

我正在尝试让 Stripe 与我的 Vue.js 2 应用程序一起工作。由于 PCI-DSS 的原因，Stripe 要求他们的 Javascript 是always loaded from js.stripe.com。我已按照以下说明进行操作：

但是当我尝试使用该库时出现'Stripe' is not defined 错误。这些解决方案的目标似乎只是将<script> 标签放入输出 HTML（例如用于分析），而不是实际使用该脚本中的函数和对象。

这是我的 Javascript 组件的样子：

<script>
    export default {
        name: "PaymentPage",
        mounted() {
            let stripeScript = document.createElement('script');
            stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
            document.head.appendChild(stripeScript);

            let s = Stripe('pk_test_Fooo');
            console.log(s);
        }
    }
</script>

我也尝试将脚本标签添加到我的public/index.html 文件中，但得到了相同的结果。这可能是我的首选路线，因为 Stripe 鼓励开发人员import their script on all pages on the site。

<!DOCTYPE html>
<html lang="en">
  <head>
    // ...
    <script src="https://js.stripe.com/v3/"></script>
  </head>

如何从外部 CDN 提取脚本并在组件的 Javascript 中使用它？

我知道一些将 Vue.js 与 Stripe 集成的库（例如 matfish2/vue-stripe 和 jofftiquez/vue-stripe-checkout），但前者对我来说不能正确导入（我正在点击 issue #24）和后者是针对旧的 Stripe API 构建的，新版本仍处于测试阶段。

【问题讨论】：

您是否需要将其专门放在脚本标签内，或者您也可以从组件或商店中引入对象？
是否正确获取 Stripe 脚本？检查网络选项卡。我创建了一个新项目并尝试了index.html 和createElement 方法，它们确实有效。我遇到的唯一问题是createElement 方式不会等待脚本获取/执行，因此您必须添加一个onload 侦听器。
还有一个 SPA，你总是在同一个页面上，index.html，所以我认为没有必要担心在“所有页面”上包含脚本。
@yuriy636 我认为我的部分问题是关注 IDE 错误（来自 Webstorm）和npm run serve 的输出，而不是查看浏览器和 Javascript 控制台中发生了什么。
大家好，我是 vue-stripe-checkout 的作者。最新版本现已发布。好心检查。谢谢。

标签： javascript vue.js vuejs2 stripe-payments vue-component

【解决方案1】：

就我而言，调用特定脚本的函数时仍然出错。因此需要指定“窗口”范围。此外，如果您需要访问 ¨onload¨ 函数中的任何 Vue 元素，您需要为 ¨this¨ 实例添加一个新变量。

<script>
export default {
    name: "PaymentPage",
    mounted() {
        let stripeScript = document.createElement('script');
        // new variable for Vue elements.
        let self = this;

        stripeScript.onload = () => {
          // call a script function using 'window' scope.
          window.Stripe('pk_test_Fooo');
          // call other Vue elements
          self.otherVueMethod();
          
        };
        stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
        document.head.appendChild(stripeScript);
    }
}

我在 Vue 2.6 上使用过这个。

【讨论】：

【解决方案2】：

感谢yuriy636's comment，我意识到错误只是来自 linter，它可能无法静态地弄清楚我在做什么。

我选择将脚本放入 index.html，然后确保通过以下方式消除 linter 错误：

// eslint-disable-next-line no-undef
let s = Stripe('pk_test_Fooo');

【讨论】：

我还是很好奇为什么Stripe对象需要通过脚本标签在你的应用中使用
@Michael 主要是需要从他们的网站上实时提供服务。使用 Vue 可能还有其他我不熟悉的方法来实现这一点。

【解决方案3】：

在检查Stripe 是否存在之前，您没有给脚本加载时间。你需要的是这样的：

<script>
    export default {
        name: "PaymentPage",
        mounted() {
            let stripeScript = document.createElement('script');
            stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
            stripeScript.onload = () => {
              let s = Stripe('pk_test_Fooo');
              console.log(s);
            };

            document.head.appendChild(stripeScript);
        }
    }
</script>

【讨论】：