VueJS/Vuex中Highcharts实时添加数据点的问题求助

嘿，这个问题我之前做项目时也踩过坑！核心就是**this的作用域冲突**——你绑定Vue组件的this后，就没法拿到Highcharts图表实例的this了，反过来也一样。给你几个实用的解决方案：

方案一：缓存图表实例的this #

在load事件函数里，先把Highcharts图表实例的this存成变量，再用绑定后的Vue组件this去访问Vuex：

chart: {
  type: 'spline',
  animation: '',
  events: {
    load: function () {
      // 先缓存Highcharts图表实例的this
      const chart = this;
      // 这里的this已经是Vue组件实例（因为我们bind了外部的this）
      setInterval(() => {
        const newPoint = [this.$store.getters.getTickEpoch, this.$store.getters.getTickQuote];
        // 用缓存的chart变量操作图表
        chart.series[0].addPoint(newPoint, true, true);
      }, 2000); // 注意你要的是每两秒，这里改成2000哦
    }.bind(this)
  }
}

方案二：把更新逻辑抽离到组件方法（更易维护） #

把图表更新的逻辑放到Vue组件的methods里，这样既能访问Vuex，又能通过参数接收Highcharts实例：

1. 先在组件的methods里定义方法：

methods: {
  startChartUpdate(chartInstance) {
    // 把定时器ID存起来，方便后续销毁
    this.chartTimer = setInterval(() => {
      const epoch = this.$store.getters.getTickEpoch;
      const quote = this.$store.getters.getTickQuote;
      chartInstance.series[0].addPoint([epoch, quote], true, true);
    }, 2000);
  }
},
// 别忘了在组件销毁时清理定时器，避免内存泄漏
beforeDestroy() {
  if (this.chartTimer) {
    clearInterval(this.chartTimer);
  }
}

2. 然后在Highcharts配置里调用这个方法：

chart: {
  type: 'spline',
  animation: '',
  events: {
    load: function () {
      // 这里的this是Highcharts图表实例，直接传给组件方法
      this.$parent.startChartUpdate(this);
      // 如果是根组件，也可以用this.$root.startChartUpdate(this)
    }
  }
}

更优方案：用响应式更新代替定时器轮询 #

既然你是通过WebSocket推送数据到Vuex，完全没必要用定时器轮询！可以监听Vuex的状态变化，有新数据就立即更新图表：

1. 先在组件里保存图表实例：

data() {
  return {
    chartInstance: null
  }
},
chart: {
  type: 'spline',
  animation: '',
  events: {
    load: function () {
      // 把图表实例存到组件的data里
      this.$parent.chartInstance = this;
    }
  }
}

2. 监听Vuex的getter变化：

watch: {
  '$store.getters.getTickQuote': function(newQuote) {
    if (this.chartInstance) {
      const epoch = this.$store.getters.getTickEpoch;
      this.chartInstance.series[0].addPoint([epoch, newQuote], true, true);
    }
  }
}

这样只要WebSocket推送新数据到Vuex，图表就会自动更新，比定时器高效多了～

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