Estoy tratando de emplear un modelo con Vue-cli. En este modelo tengo clases para crear diversos objetos.
En el main.ts
, el archivo TypeScript encargado de manejar toda la aplicación, he añadido esta ruta a la cabecera:
import './model/Repository'
;
Que importa el archivo Repository (en TypeScript) y que contiene esto:
import axios from 'axios';
// import baseURL from "../config.ts.php";
class Repository{
public url:string;
constructor(url:string){ // = baseURL + 'www/php/'
this.url = url;
}
peticionAjax(urlRequested:string , callback:any){ // a lot of functions for diverse ajax requests
axios.get(this.url + urlRequested)
.then((response:any) => {
let datos = response.data;
callback(datos);
})
.catch(function (error:any) {
// handle error
console.log(error);
// console.log("There's a problem with axios");
})
.then(function () {
// always executed
// console.log('Axios request executed');
});
}
}
El tema es que en el main.ts
quisiera crear un objeto de la clase Repository para poder pasársela a la instancia Vue principal y así poder hacer uso del objeto en todo momento, ya que este objeto es el encargado de realizar todas las peticiones Ajax. Ejemplifico como debería quedar:
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import './model/Repository';
let repo:Repository = new Repository(); // no reconoce Repository
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
let myVue = new Vue({
data:"hola",
router,
store,
render: h => h(App)
}).$mount("#app");
myVue.$data = repo; // le paso el objeto
El tema es que no reconoce la clase Repository y por tanto no puedo instanciar el objeto, seguramente no sea la forma de emplear un modelo con Vue-cli. Pero no encuentro información clara al respecto en la documentación oficial.
¿Dónde estoy haciéndolo mal?