how to include an external Vue script in Vue.js

Question

i am new in Vue.js and i have a question. I have typed a Vue script (Methods) that i want to use in the other components of my App. so i put this code in a component between tow script tags but i dont know how to use the functions of this Vue script in my Vue App.

Any Ideas to do this ?

Thanks

<script>
import axios from 'axios';
 export default {
 components:{
 'axios':axios
 },
 data:function(){
 return{
 info:" ",
 table:"",
 table_list:[]
 }
 },
 methods:{
 FetchData:function(table){
 axios
 .get('http://localhost/cgi- bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?table='+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 },
 tableList:function(){
 axios
 .get('http://localhost/cgi-bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?type=list')
 .then(response => {return this.table_list = response.data})
 .catch(error => console.log(error))
 }
 },
 mounted(){
 this.tableList();
 }
 }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

You could use Vue mixins, wherein you can define your methods in a mixin file. This mixin will be mixed with the components methods.

File: mixins.js

var baseMixin = {
 methods: {
 getData: function (target) {
 axios.get('url'+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 }
 }
};

File: somecomponent.js

Vue.component('some-component', {
 props: ['users', 'roles'],
 mixins: [baseMixin],
 methods: {
 someMethod: function(){
 this.getData
 }
 }
});

Also the Vue documentation explains it very well here