Tengo una aplicación de puntaje simple que usa Vue 3 para mantener los puntajes y los totales. Tengo un objeto de equipos globales que contiene todos los puntajes. Mi aplicación Vue 3 actualiza mis puntajes bastante felizmente dentro de sí misma, pero también necesito acceder al objeto de los equipos fuera de la aplicación Vue para realizar otras actividades que no son de interfaz de usuario, como guardar, etc. y me gustaría mantenerlas sincronizadas. .
Mi objeto de equipos globales se ve así:
let teams = []; teams[0] = { players: [ { name: "Player 1" }, { name: "Player 2" } ], scores: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }; teams[1] = { players: [ { name: "Player 1" }, { name: "Player 2" } ], scores: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] };Lo vinculo a mi aplicación Vue 3 así:
data() { return { home: teams[0], away: teams[1] }; },Si actualizo una puntuación en el objeto local o visitante dentro de Vue, el objeto de equipos globales no se actualiza. Por ejemplo, tengo una función Guardar (fuera de Vue) que se basa en que el objeto de los equipos se mantenga sincronizado con las actualizaciones en casa y fuera .
¿Hay alguna forma de hacer esto? ¿Lo estoy haciendo todo mal? Podría mover mi función Guardar a Vue pero estaba tratando de separar la lógica de mi interfaz de usuario. Tengo otras funciones que necesitan acceso a un objeto de equipos sincronizados y prefiero no agregar todo a la aplicación Vue.
Gracias por adelantado. j
Tal vez podría usar getters y setters computed en lugar de data :
computed: { home: { get() { return teams[0] }, set(val) { teams[0] = val } }, away: { get() { return teams[1] }, set(val) { teams[1] = val } }, }Parece que he encontrado una solución fea. Simplemente copio los objetos local y visitante de nuevo al objeto de los equipos durante una actualización de Vue 3, así:
updated() { teams[0] = this.home; teams[1] = this.away; }Aunque funciona, parece un poco torpe, ya que copia todo el objeto en lugar de solo la parte que cambió.