Entonces, la forma estándar de definir datos en el componente Vue es usando la función de datos como en el siguiente ejemplo:
data() { return { a:0 } } Mi pregunta es, en lugar de definir el objeto de datos después de la return , ¿puedo definir el objeto de datos en otro lugar y simplemente crear su instancia en la función de data ?
Así por ejemplo:
Componente interior de Vue:
data() { return new DataObject(); }y luego en DataObject.js hacer:
class DataObject { constructor(a) { this._a = a; } get a() { return this._a; } set a(a) { if (a > 0) { this._a = a; } else { this._a = 0; } } }Esto no funciona. Creé la siguiente solución que me permite hacer esto:
data() { return { data: new DataObject(); } } y esto funciona como se esperaba, pero sigo definiendo el objeto de datos del envoltorio para poder usar el objeto de datos y tengo que acceder a a como this.data.a en lugar de solo this.a .
Entonces, ¿es posible implementar esto en mi camino, sin definir los datos ni el objeto de datos contenedor dentro de la función data ?
Entonces quiero poder devolver objetos de datos externos desde la función de data .
Está bien construir el objeto fuera de la propiedad de datos. El problema con el código OP son los captadores de DataObject . vue reemplazará aquellos con get/set reactivos, eliminando el conocimiento de la variable subyacente.
class SomeClass { constructor() { this.a = 'A'; this.b = 'B'; this.c = 'C'; } // get a() will be overwritten } window.onload = () => { new Vue({ el: '#app', data: function() { return new SomeClass() }, }) } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h3>{{a}}</h3> <h3>{{b}}</h3> <h3>{{c}}</h3> </div>no está proporcionando un nombre al objeto que está tratando de crear
return new DataObject();intente crear una instancia de la clase en algún lugar de su código primero y luego devuélvalo
let instance = new DataObject(); return instance;