Initialization of variables with Vuex

Question

I made a VueJS 3 project with VueX to store the data.

When I print the variable data.doughnutChart.data in the following code it displays

{ "labels": [ "OK", "WARNING", "ERROR" ], "datasets": [ { "backgroundColor": [ "#d4efdf", "#fdebd0", "#fadbd8" ], "data": [ 3, 1, 2 ] } ] }

But the graph doesn't use these data [3,1,2], the graph uses the values of the initialization in the index.js of VueX. Here my code :

<template>
  {{data.doughnutChart.data}}
  <div style="height:200px;width: 200px; position:center">
    <vue3-chart-js
        :id="data.doughnutChart.id"
        :type="data.doughnutChart.type"
        :data="data.doughnutChart.data"
        :options="data.doughnutChart.options"
    ></vue3-chart-js>
  </div>
</template>

<script>
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  beforeMount() {
    this.$store.dispatch("getData");
  },
  computed: {
    data() {
      return {
        doughnutChart: {
          id: 'doughnut',
          type: 'doughnut',
          data: {
            labels: ['OK', 'WARNING', 'ERROR'],
            datasets: [
              {
                backgroundColor: [
                  '#d4efdf',
                  '#fdebd0',
                  '#fadbd8'
                ],
                data: [this.$store.state.nbOk, this.$store.state.nbWarning, this.$store.state.nbError]
              }
            ]
          },
          options:
              {
                plugins: {
                  legend: {
                    display: false
                  },
                  title: {
                    display: true,
                    text: 'Current situation'
                  }
                },
              }
        }
      }
    }
  }
}
</script>

I read the value in my index.js (VueX) :

import axios from 'axios'
import { createStore } from 'vuex'
export default createStore({
  state: {
    data: [],
    nbError : 0,
    nbWarning : 0,

  },
  
  actions: {
    getData({commit}){
      axios.get('http://localhost:8080/data/mock.json')
      .then(res => {
        commit('SET_DATA', res.data)
      })}
  },
  mutations: {
    SET_DATA(state, data){
      state.data = data.data;
      state.nbWarning = 0;
      state.nbError = 0;
      for (let i = 0; i < state.data.length; i++) {
        if(state.data[i].status == 'WARNING'){
          state.nbWarning += 1;
        };
        if(state.data[i].status == 'ERROR'){
          state.nbError += 1;
        };
      };
    }
})

However it works when, in my Vuejs project, I go in an other page and come back but not when I just open the project or refresh the page.

Do you know why ?

Answer 1

data property should be defined as computed in order to receive store changes:

<template>
  {{data}}
</template>
    
<script> 
export default {

  data() {
    return {
      
    }
  },
computed:{
   data(){
    return [this.$store.state.nbWarning, this.$store.state.nbError]
   }
},
  beforeMount() {
    this.$store.dispatch("getData");
  }
}
</script>