programing

Vue.js 메서드에서 외부 JavaScript 개체를 사용하는 방법

copysource 2022. 8. 9. 23:46
반응형

Vue.js 메서드에서 외부 JavaScript 개체를 사용하는 방법

Vue.js 2 어플리케이션으로 스트라이프를 조작하려고 합니다.PCI-DSS의 이유로 Stripe에서는 Javascript를 항상 로딩해야 합니다.의 지시에 따라 다음 절차를 따릅니다.

하지만 난...'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하도록 권장하기 때문에 이 방법을 선호합니다.

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

외부 CDN에서 스크립트를 가져와 컴포넌트의 Javascript 내에서 사용하려면 어떻게 해야 합니까?

Vue.js와 Stripe를 통합하는 라이브러리(matfish2/vue-stripejofftiquez/vue-stripe-checkout 등)는 알고 있습니다만, Stripe의 전자가 올바르게 Import 되지 않습니다(문제 #24). 후자는 오래된 Stripe API를 기반으로 구축되어 있으며, 새로운 버전은 아직 베타판입니다.

스크립트가 로드될 때까지의 시간을 주지 않고 있습니다.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>

yuriy636의 코멘트 덕분에 에러는 linter에서만 발생한다는 것을 알 수 있었고, 아마 제가 무엇을 하고 있는지 정적으로 알 수 없을 것입니다.

저는 대본을 넣기로 했습니다.index.html그 후 다음과 같은 방법으로 린터 오류를 없앴습니다.

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

제 경우 특정 스크립트의 함수를 호출할 때 오류가 발생했습니다.따라서 "window" 범위를 지정해야 했습니다.또, 「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에서 작업했습니다.

npm 패키지를 설치하기만 하면 됩니다.npm install @stripe/stripe-js일반 수입품처럼 사용할 수 있습니다.

import { loadStripe } from "@stripe/stripe-js";

export default {
  async mounted() {
    // init stripe
    const stripe = await loadStripe('your_stripe_key_here');
    this.stripe = stripe; // store the stripe instance
    // access the stripe instance in your methods or where you want to use them
  },
}

2022년 1월 6일부로 작동합니다.

언급URL : https://stackoverflow.com/questions/57840349/how-to-use-external-javascript-objects-in-vue-js-methods

반응형