After trying to find a solution on the internet for my specific case, I decided to call data from firebase using this line of code:
this.$store.dispatch('getConsumptionFromFirebase')
However, I encountered an issue where the mounted() function in my Doughnut.vue file is being called before I fetch data from firebase. As a result, when I navigate to another component and return, the data is rendered because it was previously loaded. How can I resolve this problem and ensure that the data is rendered instantly? Here is my code:
Code snippet from mainComponent.vue file:
<Doughnut class="chartSize" :labels="labelsDoughnut" :data="dataDoughnut" :colors="backgroundColorDoughnut"></Doughnut>
<script>
import { mapGetters } from 'vuex'
import Doughnut from '@/components/Graphs/Doughnuts'
export default {
components: {
Doughnut
},
data () {
return {
labelsDoughnut: [ 'Air Conditioning & Heating', 'Cleaning Appliances' ],
backgroundColorDoughnut: [ '#41B883', '#E46651' ]
}
},
computed: {
...mapGetters({
airConditioningHeatingMonthlyConsumption: 'airConditioningHeatingMonthlyConsumption',
cleaningAppliancesMonthlyConsumption: 'cleaningAppliancesMonthlyConsumption'
}),
dataDoughnut: function () {
return [ this.airConditioningHeatingMonthlyConsumption, this.cleaningAppliancesMonthlyConsumption ]
}
},
created () {
this.$store.dispatch('getConsumptionFromFirebase')
}
}
</script>
Code snippet from Doughnut.vue file:
<script>
import { Doughnut } from 'vue-chartjs'
export default {
props: ['labels', 'data', 'colors'],
extends: Doughnut,
data () {
return {
chartOptions: {
legend: {
position: 'top'
}
},
dataCollection: {
labels: this.labels,
datasets: [ { data: this.data, backgroundColor: this.colors } ]
}
}
},
mounted () {
this.renderChart(this.dataCollection, this.chartOptions)
}
}
</script>