Vue.js 如何在 mounted() 之前观察，无法从手表获取数据

Question

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

我的目标是在 watch

中发送新 API 时更新 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 发生变化时，这将自动 return 更新 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

Vue.js 如何在 mounted() 之前观察，无法从手表获取数据

Vue.js How to watcher before mounted() , can't get data from watch

javascript

mount

watch

vue.js