Vue3 Apexcharts组件如何通过mounted获取REST GET数据完成初始化渲染

结论 #

这个说法是正确的。你原有代码的问题在于：data初始化函数执行时发起的异步请求，会在你已经返回init_data之后才拿到响应结果，此时直接修改init_data无法触发Vue的响应式更新，同时此时组件还未完成挂载，图表实例也未初始化完成，自然无法渲染新获取的数据。

修改方案 #

你可以按照下面的逻辑调整代码，适配Vue3选项式API的写法：

<script>
/* eslint-disable */
import axios from 'axios'

export default {
  name: "BarExample",
  data() {
    return {
      chartOptions: {
        chart: {
          type: "bar",
          stacked: true,
          animations: {
            enabled: true, // 关闭可加快加载速度
          },
        },
      },
      // 初始值设置为空数组，匹配apexcharts的series格式要求
      series: []
    }
  },
  methods: {
    updateChart,
    async makeGetRequest(url) {
      const res = await axios.get(url)
      return res.data
    }
  },
  async mounted() {
    // 组件挂载完成后发起请求
    const url = "http://localhost:8080/vue3-apexcharts/data.json"
    const data = await this.makeGetRequest(url)
    console.log(JSON.stringify(data))
    // 直接修改响应式属性，自动触发图表重绘
    this.series = data
  }
};
</script>

主要修改点 #

• 将异步请求逻辑从data初始化函数移到mounted生命周期钩子中，保证发起请求时组件和图表实例都已完成初始化，修改数据后可直接触发渲染
• 移除了重复的axios引入，统一在顶部导入
• 修正了series的初始值，从空对象改为空数组，符合apexcharts的数据格式要求
• 把工具函数整合到组件的methods中，更符合Vue组件的代码规范

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