Plusieurs instances de Vue sur la même page utilisant le même code source

Question

Je travaille à apporter la fonctionnalité de Vue.js dans l'écosystème WordPress, et mon premier projet concerne la recherche et le filtrage sur une page.

Comme le site Web principal est initiallement rendu par WordPress avec PHP/HTML, j'ai initialisé Vue sur la page en le reliant à un élément HTML que j'ai généré avec WordPress. Tout fonctionne parfaitement bien, mais maintenant j'essaie d'aller plus loin en ayant plusieurs instances du même code (qui peuvent fonctionner ensemble).

Prenez cet exemple de capture d'écran de Indeed (imaginons que c'est un site WordPress) :

Comme la sortie entière n'est pas faite en Vue.js, je dois générer plusieurs éléments HTML DIV du côté de WordPress, et initialiser Vue sur eux.

Étant donné que le formulaire/les champs seront générés dynamiquement en fonction de la configuration/l'installation de l'utilisateur, la même base de code serait utilisée pour les deux instances... mais je dois d'une manière ou d'une autre les faire fonctionner ensemble de concert, pour par exemple mettre à jour les résultats sur la page lorsqu'une valeur est sélectionnée ou modifiée dans l'une des instances.

L'idée ici est que dans mon fichier JS principal utilisant du javascript pur, je détecte tous mes éléments HTML spécifiques qui existent sur la page (peut-être même définir un slug pour chacun dans un objet de données), puis je fais une boucle foreach pour initialiser un new Vue() sur chaque instance.

Ma première idée est d'utiliser le stockage Vuex, en attachant le stockage unique à toutes les instances, en mémorisant les valeurs sélectionnées, et en déclenchant une action pour mettre à jour les listes lorsque l'une d'elles change.

Est-ce que quelqu'un a déjà fait quelque chose de similaire auparavant? Y a-t-il quelque chose dont je devrais me méfier en le faisant? ou quelqu'un aurait-il de meilleures suggestions sur la manière dont cela devrait être fait?

Je me suis dit qu'il serait préférable de poser la question ici plutôt que d'apprendre par l'expérience et de découvrir plus tard que cela pourrait ne pas être possible, ou qu'il y aurait des problèmes à le faire.

Toutes suggestions, commentaires, critiques ou idées sont grandement appréciés.

mise à jour J'ai reçu une suggestion de simplement lier l'instance Vue au body, supprimer la fonction render, puis simplement générer l'élément HTML du composant là où c'est nécessaire (au lieu de générer un div puis de s'y attacher). Je vais tester cela, mais je suis curieux de connaître votre opinion à ce sujet ?

Answer 1

Pour toute personne qui tombe là-dessus, j'ai fini par initialiser les instances Vue comme ceci:

const sections = document.getElementsByClassName( "my-wrapper" )

for ( var i = 0; i < sections.length; i ++ ) {
    new Vue( {
         el: '#' + sections[ i ].id,
         store
     })
}

Essentiellement, initialiser une nouvelle instance Vue sur chaque sortie trouvée sur la page, en passant le store partagé à chacune d'entre elles.

Answer 2

Je n'ai pas mis en place moi-même cette configuration à plusieurs instances de Vue, mais j'ai lu à plusieurs endroits que Vue est conçu pour prendre en charge ce cas d'utilisation. Voir par exemple ici : Vue : est-il correct d'avoir plusieurs applications Vue pour un seul site web ?

Vuex est excellent pour une application web monopage plus importante avec plusieurs composants et ce que vous suggérez revient essentiellement à la même chose sans une instance racine partagée entre tous les composants. C'est là que le magasin Vuex sera très utile en gardant chaque composant Vue de la page synchronisé avec une "source de vérité" des données de l'application.

Je ne suis pas sûr de comprendre cette partie de votre question cependant :

Ma première pensée est d'utiliser le stockage Vuex, en attachant le stockage unique à toutes les instances, en stockant les valeurs sélectionnées, et déclenchant une action pour mettre à jour les annonces lorsque l'une d'elles change.

Lorsque les données sont mises à jour dans le magasin Vuex, si vous configurez Vuex correctement, les mises à jour du DOM se feront de manière "réactive" automatiquement. Il n'y a aucune action à prendre autre que de modifier les données du magasin.

Concernant votre mise à jour, cela pourrait fonctionner, mais cela ne me semble pas être une bonne idée. Cela semble aller à l'encontre de la manière dont Vue est normalement utilisé et je ne me souviens pas avoir vu cette configuration dans la documentation.

Comme je l'ai dit, je n'ai pas d'expérience directe avec la conception que vous proposez, donc j'ai peut-être manqué quelque chose. Je voulais quand même partager mon avis.