Vuex监听状态变化触发Highcharts图表Reflow的实现疑问

Hey there! Let's work through your Highcharts + Vuex problem—this is a super common snag when mixing reactive Vue state with third-party chart libraries, so you're not alone here.

Why can't you call reflow() in mounted? #

The main issue here is timing: when your $store.watch triggers, the Highcharts instance might not be fully initialized yet. Even though your component is mounted, the chart created from your chartOptions computed property might still be in the process of rendering, especially if lineData.data updates right after the component mounts.

Also, make sure you're targeting the actual Highcharts instance, not just calling this.reflow() directly. reflow() is a method on the Highcharts chart object, not your Vue component itself.

Fixing the mounted watch issue #

First, ensure your Highcharts component exposes the chart instance. If you're using a wrapper like vue-highcharts, or a custom component, add a ref to the chart component in your template:

<template>
  <highcharts :options="chartOptions" ref="lineChart"></highcharts>
</template>

Then, in your mounted hook (or better yet, a Vue watch property), you can access the chart instance via the ref and call reflow() once you confirm it exists:

mounted() {
  this.$store.watch(
    state => state.lineData.data.length,
    (newLength) => {
      // Wait until the chart instance is ready
      if (newLength > 0 && this.$refs.lineChart) {
        this.$refs.lineChart.chart.reflow();
      }
    }
  );
}

Fixing Highcharts click events not accessing custom methods #

Highcharts event callbacks run in their own context (the Highcharts element, not your Vue component), so this won't point to your component by default. There are two easy fixes:

1. Save a reference to your Vue component:

computed: {
  chartOptions() {
    const vm = this; // Save Vue component context
    return {
      // ... other chart config
      plotOptions: {
        line: {
          events: {
            click: function() {
              vm.customMethod(); // Use saved context to call your method
              this.reflow(); // Here, `this` is the Highcharts series instance
            }
          }
        }
      }
    };
  }
}

2. Use an arrow function (inherits the outer Vue component context):

click: () => {
  this.customMethod(); // `this` now refers to your Vue component
  this.$refs.lineChart.chart.reflow();
}

Better approach: Use Vue's native watchers #

Instead of $store.watch, using Vue's built-in watch property feels more idiomatic and integrates better with component lifecycle:

watch: {
  '$store.state.lineData.data': {
    deep: true, // Watch for changes inside the array
    handler(newData) {
      if (newData.length > 0 && this.$refs.lineChart) {
        this.$refs.lineChart.chart.reflow();
      }
    }
  }
}

Can you access computed properties in mounted? #

Absolutely! Computed properties are available as soon as the component instance is created. The problem isn't accessing chartOptions itself—it's that the chart instance derived from chartOptions might not exist yet when your watcher triggers. Adding a check for this.$refs.lineChart ensures you only call reflow() once the chart is ready.

Final thought #

If your chart isn't updating automatically when Vuex state changes, double-check that chartOptions is properly reactive—all data used in the computed property should come from reactive sources (like Vuex state or component data). In most cases, Highcharts wrappers for Vue will update the chart automatically when options change, but reflow() is only needed if you're adjusting the chart container size or need to force a layout refresh after data loads.

内容的提问来源于stack exchange，提问作者Data Mastery