Initialisation de données et observateurs utilisant P5Js et VueJs

Question

Comme j'essaie de jouer avec les algorithmes évolutionnaires et de construire des outils de visualisation du processus, j'aimerais utiliser VueJs avec P5Js. J'ai ce code: (SO) Playing with Evolutionary Algorithms on Codepen.io

Le problème est que les données de l'instance Vue population ne se mettent pas à jour correctement.

Voici ce que j'ai essayé de faire:

• passer le Game global comme objet données d'une occurrence Vue. Puis population se mettre à jour correctement, mais les données sont si grandes que tout devient laggy;
• Remplir le champ Game.population lorsqu'il est déclaré, mais cela ne fonctionne pas: P5JS me renvoie une erreur createVector() is not defined;
• Remplissage du tableau Game.population dans la méthode beforeCreate() de l'instance Vue. Cela ne fonctionne pas non plus. Me donner une autre erreur;
• Proxy Game.population par un autre objet Data déclaré globalement ou dans la méthode de l'instance Vue beforeCreate(), pour curating données cellules intéressantes (je ne suis pas besoin de l'attribut pos) et ainsi éviter createVector() erreur. C'est une impasse. En ce qui concerne le levage, je me suis demandé si VueJS était initialisé avant l'exécution de P5JS. C'est le cas. Mais je ne peux pas comprendre comment changer cela.

Quel est le problème ici? Comment dois-je refactoriser mon script pour que les données de l'instance de Vue et Game.population puissent être liées?

Answer 1

Cette solution n'est pas aussi jolie que de lancer votre objet Game dans l'instance de Vue, mais cela fonctionne.

fourchue ici:https://codepen.io/andymerskin/pen/LyoEmW

Voici ce que j'ai changé:

1. Ajout d'une computed getter/setter pour population, vous donnant une manière propre à rendre la longueur du tableau dans le modèle, et la possibilité d'attribuer dans votre boucle de jeu en utilisant app.population = Game.population dans votre routine Game.doPopulatePacks.
2. Modifié data.property dans l'instance de Vue à _property pour conserver les conventions de dénomination associées à l'utilisation dans la propriété calculée. Il vient avec la mise en garde que c'est no longer proxied to avoid conflicts with Vue's internal properties, puisque nous nous appuyons sur la propriété calculée dans le modèle. (À l'heure actuelle, il n'y a pas une convention claire pour définir des propriétés privées dans une instance Vue, même si underscores _ sont la préférence dans JS plus largement.)

Et avec cela, vous verrez dans la fourchue démo que la population de votre jeu reste à jour dans l'interface utilisateur.