Je ne suis pas doué pour utiliser Pinia pour stocker des données avec vue-chartjs afin de créer des graphiques réactifs. J'utilise cet exemple comme guide, mais j'ai du mal à faire réagir le graphique aux changements dans le magasin.
J'ai modifié les données du magasin Pinia dans un autre composant à l'aide de formulaires réactifs et j'ai pu voir les données du magasin changer, mais le graphique n'a pas été mis à jour.
Je rends le graphique à l'aide du composant suivant :
importer {storeToRefs} depuis 'pinia' importer { useStore} depuis '@/store/pinia-store-file' ; importer { Graphique en tant que ChartJS, Échelle de catégorie, Échelle linéaire, PointElement, Élément de ligne, Titre, info-bulle, Légende } à partir de 'chart.js' ; importer { Ligne } depuis 'vue-chartjs' ; ChartJS.register( Échelle de catégorie, Échelle linéaire, PointElement, Élément de ligne, Titre, info-bulle, Légende ); const magasin = useStore(); const storeData= storeToRefs(magasin); const labels = [...Array(storeData.arr.value.length).keys()]; données const = { étiquettes : étiquettes, ensembles de données : [ { étiquette : 'Data One', Couleur d'arrière-plan : '#f87979', données : storeData.arr.value } ] } options const = { réactif : vrai, maintenirAspectRatio : faux }
J'ai essayé d'encapsuler la variable du magasin dans ref() mais je pense que je dois restituer le graphique ? Je travaille à appliquer l'exemple ci-dessus à l'état du magasin Pinia et à le mettre à jour lorsque le magasin change.
Vous ne définissez pas de données sur la réponse. Veuillez utiliserpour calculer
Ce code peut résoudre le problème :