Me pregunto si podría hacer el código de abajo menos feo.
En el componente tengo una propiedad person . Me gustaría usar campos del objeto person en mi plantilla sin anteponer a cada campo una person.something . Pero la única forma que conozco es abajo.
Esto es lo que tengo en el cajero automático:
( Por favor considere el siguiente código como solo un ejemplo, no es uno real )
{ name: 'Demo', props: { person: { type: Object, default: {} } }, computed: { firstName() { return this.person.firstName }, lastName() { return this.person.lastName }, age() { return this.person.age }, gender() { return this.person.gender } } }Esto es lo que quiero tener en su lugar (más o menos):
{ name: 'Demo', props: { person: { type: Object, default: {} } }, computed: { ...this.person // <-- something like this would be better if only it would work } }Algunas suposiciones
Supongo que cosas como esta deberían ser posibles, porque tenemos mapGetters de vuex:
computed: { ...mapGetters({ something: SOMETHING }) },Veo tu punto, pero lo que quieres no es posible.
El principal problema es this . Trabajamos con Opciones API. ¿Qué se computed ? Un objeto que se pasa a Vue y Vue crea una nueva instancia con propiedad computada para cada función (o par obtener/establecer) dentro del objeto computed . Eso significa que el operador de propagación se ejecuta en el momento en que la instancia del componente aún no existe, lo que significa que no existe this
mapGetters funciona porque su entrada son solo cadenas estáticas. Si tuviera alguna descripción estática del objeto Person , por ejemplo, algún esquema generado a partir de la especificación Open API, podría crear el ayudante mapProperties y usarlo para generar accesorios computados...
Editar: Sí, hay una manera de crear accesorios computados dinámicamente en beforeCreate modificando el objeto $options ; al menos fue posible en Vue 2. No estoy seguro acerca de Vue 3. En ambos casos, está documentado para ser de solo lectura y Vue 3 es de alguna manera más estricto al forzar la "solo lectura". Sin embargo, este es un enfoque muy diferente al de su pregunta ...
El enfoque se demuestra, por ejemplo , aquí.
Con vue 3 o el complemento api de composición para vue 2, puede usar toRefs para distribuir el valor de prop dentro del gancho de setup :
import {toRefs} from 'vue'//vue3 //import {toRefs} from '@vue/composition-api'//vue 2 export default{ name: 'Demo', props: { person: { type: Object, default: {} } }, setup(props){ return {...toRefs(props.person)} } }