vue.js - Wait for vuex to load before loading the component with vue-chartjs

Question

<script>
import { Line, mixins } from "vue-chartjs";
const { reactiveData } = mixins;

export default {
  extends: Line,
  mixins: [reactiveData],
  props: ["options"],
  mounted() {
    this.renderChart(
      {
        labels: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23",
        datasets: [
          {
            label: "Today",
            data: this.dailyXYChart,
            backgroundColor: "transparent",
            borderColor: "rgba(1, 116, 188, 0.50)",
            pointBackgroundColor: "rgba(171, 71, 188, 1)",
          },
          {
            label: "Yesterday",
            data: this.dailyXYChartYesterday,
            backgroundColor: "transparent",
            borderColor: "rgba(116, 1, 188, 0.50)",
            pointBackgroundColor: "rgba(171, 71, 188, 1)",
          },
        ],
      },
      {
        responsive: true,
        maintainAspectRatio: false,
      }
    );
  },
  computed: {
    dailyXYChart() {
      return this.$store.getters.dailyXYChart;
    },
    dailyXYChartYesterday() {
      return this.$store.getters.dailyXYChartYesterday;
    },
  },
};
</script>

I'm loading the data from vuex, how do I make the component to load AFTER the vuex store loads? It only shows the chart when click away from the page and going back to the page that contains this component. How do I re-render the chart? I don't know how to use watcher that watches vuex states

Answer 1

Use v-if in the parent to conditionally render this component only when the chart data is ready. For example, if the data is stored in chartData:

Parent

<div>
  <ChartComponent v-if="chartData"></ChartComponent>
</div>

data() {
  return {
    chartData: null
  }
}

Imagine that chartData is the data eventually set by the Vuex dispatch. Now the child chart component won't be rendered until that async call has completed and the data is ready.

Also: You could show a loading element while you wait if you like with v-else. Here's a basic element but you could use an animated icon, placeholder, a completely different component, etc.:

<div>
  <ChartComponent v-if="chartData"></ChartComponent>
  <div v-else>Loading...</div>
</div>