외부 자바 스크립트 파일의 함수 사용

Question

안녕하세요 저는 webpack 및 VueJS에서 작업하고 여러 가지 다른 스크립트에서 함수를 사용하고 싶지만이 함수의 스크립트를 여러 번 쓰고 싶지는 않습니다.

export default { 
    data(){ 
     return { 
      metadata: null, 
     } 
    }, 
    methods:{ 

    }, 
    mounted(){ 
      this.metadata = this.httpGet("myurl"); 


    } 
} 

그리고이 같은 :

export default { 
    data(){ 
     return { 
      metadata: null, 
     } 
    }, 
    methods:{ 

    }, 
    mounted(){ 
      this.metadata = this.httpGet("myurl"); 


    } 
} 

그리고 이것은 내가 내 기능을 만들려는 세 번째 부분입니다 : 그래서 나는이처럼 내 기능을 사용하려면이 개 파일이

httpGet(theUrl){ 
     var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.open("GET", theUrl, false); // true for asynchronous request 
     xmlHttp.send(null); 
     return JSON.parse(xmlHttp.responseText); 

} 

정확한 코드가 작동하지 않습니다. 그래서 내가 수입, 필요 또는 이와 같은 것을 어떻게 사용할 수 있는지 말해주십시오. 나는 그것이하고 싶은 작은 일을 위해 복잡하기 때문에 vuex를 사용하고 싶지 않다. 최종 목표는 다른 기능을 저장하고 여러 다른 스크립트에서 사용할 수있는 스크립트를 얻는 것입니다.

Answer 1

이를 위해 당신은 단지 mixin 사용할 수 있습니다

MetaData.js을 구성 요소에서 이제

const MetaData = { 
    data(){ 
     return { 
      metadata: null, 
     } 
    }, 
    methods:{ 
     httpGet(theUrl){ 
     var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.open("GET", theUrl, false); // true for asynchronous request 
     xmlHttp.send(null); 
     return JSON.parse(xmlHttp.responseText); 

     } 
    }, 
    mounted(){ 
     this.metadata = this.httpGet("myurl"); 
    } 
} 

export default MetaData 

당신과 같이 사용할 수 있습니다 :

<template> 
    <div>{{metadata}}</div> 
</template> 

<script type="text/javascript"> 
    import MetaData from './mixins/MetaData' // wherever you have saved the mixin 

    export default{ 
    mixins: [MetaData] 
    } 
</script> 

을 그 자동 것이다 두 객체를 병합하면 가져온 Vue 구성 요소의 mixin에있는 모든 인스턴스 속성을 사용할 수 있습니다.

는 여기에 예제로 JSFiddle을 : 당신은 당신의 수입과 수출을 해결 할 수 웹팩이 필요한 것처럼 https://jsfiddle.net/c5takojL/