Vue JS смонтирован Firebase асинхронный вызов не обновляет данные

Question

Я знаю, в чем проблема, но я не могу найти решение в интернете для моего случая.Поэтому я вызываю данные из firebase с помощью этой строки:

this. $ Store.dispatch ('getConsumpFromFirebase')

, но моя функция mount () в файле Doughnut.vueвызывается до того, как я получу данные из firebase, потому что когда я перехожу к другому компоненту и возвращаюсь сюда, данные будут отображаться, потому что они были ранее загружены.Как я могу решить эту проблему, мне нужно, чтобы данные отображались мгновенно.Вот код:

Мой файл mainComponent.vue:

<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>

Мой файл Doughnut.vue:

<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>

Answer 1

Я вижу, что вы визуализируете свой компонент вручную, вызывая this.renderChart(this.dataCollection, this.chartOptions)

Так что, возможно, будет хорошей идеей использовать вычисления вместо данных и смотреть:

<script>
  import { Doughnut } from 'vue-chartjs'
  export default {
    props: ['labels', 'data', 'colors'],
    extends: Doughnut,
    computed: {
        chartOptions () {
          return {
            legend: {
              position: 'top'
            }
          }
        },
        dataCollection () {
          return {
            labels: this.labels,
            datasets: [ { data: this.data, backgroundColor: this.colors } ]
          } 
        }
    },
    mounted () {
      this.renderChart(this.dataCollection, this.chartOptions)
    },
    watch: {
      chartOptions: function () {
        this.renderChart(this.dataCollection, this.chartOptions)
      },
      dataCollection: function () {
        this.renderChart(this.dataCollection, this.chartOptions)
      }
    }
  } 
</script>