Données réactives stockées à l'aide de vue-chartjs et Pinia

Question

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 :

<configuration du script>
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
}



</script>

<modèle>

  <Ligne :data="données" :options="options"

</template>

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.

Answer 1

Vous ne définissez pas de données sur la réponse. Veuillez utiliser pour calculer

Ce code peut résoudre le problème :

<script setup>
import { storeToRefs } from 'pinia'
import { useStore} from '@/store/pinia-store-file';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
} from 'chart.js';
import { Line } from 'vue-chartjs';
import { computed } from "vue"

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);  

const store = useStore();

const storeData= storeToRefs(store);

const data = computed(() => ({
  labels: [...Array(storeData.arr.value.length).keys()],
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: storeData.arr.value
    }
  ]
}))

const options = {
  responsive: true,
  maintainAspectRatio: false
}



</script>

<template>

  <Line :data="data" :options="options" />

</template>