javascript - Vue.js 如何在 Mounted() 之前进行观察，无法从观察中获取数据

Question

在async Mounted()部分中，它无法从this.point0检索数据，因为它是在watch之前安装的，对吗？我该如何解决这个问题。

我的目标是每当新的API在watch中发送时更新mounted()中的p1和p0

可以在这里查看我的代码 https://jsfiddle.net/1eahf26q/

  data() {
    return {
      point0: [],
      point1: [],
    };
  },

  watch: {
   async breedKey (newVal, oldVal)  {
       try {
      this.promise = axios.get(new_url);
      const res = await this.promise;

      this.point0 = res.data.data[0].Freq;
      this.point1 = res.data.data[1].Freq;
   }
  },    

  async mounted() {
    await this.promise;

    let p0 = this.point0;
    let p1 = this.point1;
    const datapresent = [p0, p1, this.point1,];
    },
})

Answer 1

从您的代码来看，计算似乎可以完成这项工作。尝试将逻辑从 mounted() 移动到计算为

computed: {
    dataPreset() {
        return [this.p1, this.p2];
    }
 }

每当 p1 或 p2 发生变化时，这都会自动返回更新的 dataPreset。

编辑:

据我所知，一旦您的观察者中拥有了 API 数据，您绝对可以初始化您的图表。你的观察者可能会像

watch: {
    selectedTrend: {
      immediate: true,
      handler(to) {
        this.trend = to.Trends;
        this.GetAPIData(to.Trends, to.DT);  //A method to get the sample API DATA
        this.InitializeGraph(); //A method which initializes your graph
      }
    }
  },

在 https://codesandbox.io/s/twitter-trends-fp0wn 创建的示例沙箱