Tengo un escenario en Vue 2 donde estoy inicializando clases de API como propiedades de datos en mi componente de la siguiente manera:
new Vue({ el: '#my-element' data: { apiUrl: apiUrl, api: new ApiClient(this.apiUrl) } })Cliente API:
class ApiClient { constructor(apiUrl) { this.apiUrl = apiUrl; } async getRequest() { // Perform GET } } Esto funciona bien, pero tengo escenarios en los que necesito usar dos clientes de API diferentes. Si se pasa un prop determinado a mi componente, quiero inicializar esa propiedad de datos como secondApi , como ejemplo.
En este escenario, me veo usando el gancho created() :
created() { if (prop === true) { this.secondApi = new SecondApiClient(this.apiUrl); } } Sin embargo, en mis data : { } , no estoy seguro de cómo inicializar correctamente esta propiedad secondApi opcional (en el caso de que no se pase el accesorio). ¿Lo configuro como un objeto vacío al principio? Siempre será un objeto de class como apiClient . ¿Hay un tipo de datos de clase vacío?
Sí, puedes seguir uno de los siguientes
Enfoque 1:
data() { return { apiUrl: apiUrl, api: null // or you can even keep it as new ApiClient(this.apiUrl) if that's the default value } }, props: ['certainProperty'], created() { if (this.certainProperty === true) { // certainProperty is a prop this.api = new SecondApiClient(this.apiUrl); } else this.api = new ApiClient(this.apiUrl); }A veces puede haber un retraso en la recepción de los accesorios, por lo que es mejor seguir el enfoque a continuación.
Enfoque 2:
data() { return { apiUrl: apiUrl, api: null // or you can even keep it as new ApiClient(this.apiUrl) if that's the default value } }, props: ['certainProperty'], watch: { certainProperty(newVal) { if (newVal === true) { // certainProperty is a prop this.api = new SecondApiClient(this.apiUrl); } else this.api = new ApiClient(this.apiUrl); } }Nota: debe pasar los accesorios del componente principal como
<child-component :certainProperty="true" />