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>

我正在从 vuex 加载数据，如何让组件在 vuex 存储加载后加载？它仅在离开页面并返回包含此组件的页面时显示图表。如何重新渲染图表？我不知道如何使用观察 vuex 状态的 watcher

Answer 1

在父级中使用 v-if 仅在图表数据准备好时有条件地呈现此组件。例如，如果数据存储在 chartData 中：

家长

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

data() {
  return {
    chartData: null
  }
}

想象一下，chartData 是 Vuex 调度最终设置的数据。现在，在异步调用完成且数据准备就绪之前，不会呈现子图表组件。

另外：如果您喜欢v-else，您可以在等待时显示加载元素。这是一个基本元素，但您可以使用动画图标、占位符、完全不同的组件等：

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

在用 vue-chartjs 加载组件之前等待 vuex 加载

1 个答案: