我的 vue.js 代码反复从服务器获取数据

Question

我是Vue.js的新手，不完全理解（请不要介意缩进）

  methods:{
getdata() {
  if (this.myPage.month === 5) {
    axios.get("http://www.amock.io/api/maymock").then(response => {
      this.Month = response.data.checkInData.Month;
      this.Stat = response.data.checkInData.CheckedInStat;
      this.TotalTarget = response.data.checkInData.TotalTarget;
      this.$emit("TotTarget", this.TotalTarget);
      this.TargetForMonth = response.data.checkInData.CurrentAchieved;
      this.$emit("TotCount", this.TargetForMonth);
  })
}
  if (this.myPage.month === 4) {
    axios.get("http://www.amock.io/api/aprilmock").then(response => {
      this.Month = response.data.checkInData.Month;
      this.Stat = response.data.checkInData.CheckedInStat;
      this.TotalTarget = response.data.checkInData.TotalTarget;
      this.$emit("TotTarget", this.TotalTarget);
      this.TargetForMonth = response.data.checkInData.CurrentAchieved;
      this.$emit("TotCount", this.TargetForMonth);
  })
     }

   },
},

computed: {
attributes() {
  this.getdata();
  let checkindata = [];
  if (this.Click === 0) {
    var entry = new Object();
    (entry.highlight = "red"), (entry.dates = new Date());
    checkindata.push(entry);
    for (var day = 0; day < this.Stat.length; ++day) {
      entry = new Object();
      (entry.highlight = this.Stat[day] === 0 ? "red" : "green"),
        (entry.dates = new Date(2020, this.Month, day + 1));
      checkindata.push(entry);
    }
  }
  if (this.Click === 1) {
    var entry1 = new Object();
    (entry.highlight = "green"), (entry.dates = new Date());
    checkindata.push(entry1);
    for (day = 0; day < this.Stat.length; ++day) {
      entry1 = new Object();
      (entry.highlight = this.Stat[day] === 0 ? "red" : "green"),
        (entry.dates = new Date(2020, this.Month, day + 1));
      checkindata.push(entry1);
    }
  }
  return checkindata;
 }
},

  data() {
return {
  myPage: {},
  Stat: [],
  Month: null,
  TotalTarget: null,
  TargetForMonth: null,
  responded: null
  };
}

我正在使用 v-calendar 插件并通过属性函数将数据传递给日历。但是，我希望方法 getdata 在变量 myPage.month 更改时从提供的 link 获取数据，并且它应该只执行一次。 myPage 是如何变化的，这里没有给出，因为它是动态的日历插件。目前，它正在无限次执行此操作，这很麻烦。有什么办法可以解决吗？

Answer 1

您正在计算的属性中调用 getData()。这是不正确的；你不应该在计算的属性中改变状态，更不用说每次需要重新计算属性时都会调用它。

这是你应该用观察者来做的事情。只需观察 myPage.month 变化，然后调用 getData() 响应这些变化。

像这样：

watch: {
  'myPage.month': {
    immediate: true,
    handler() {
      this.getData();
    }
  }
}

其他一些改进：

而不是 new Object() 只需执行 {}。
像 (x = 1), (y = 2) 这样的代码应该是 2 个单独的语句（由 ; 分隔，而不是 ,）最好在单独的行上。 () 不是必需的。
实际上你可以像这样一次性构建对象：

var entry = {
  highlight: "red",
  dates: new Date(),
};
checkindata.push(entry);

尽量减少重复代码：

getData() {
  let api;
  switch (this.myPage.month) {
    case 4: api = 'aprilmock'; break;
    case 5: api = 'maymock'; break;
    default: return;
  }

  axios.get(`http://www.amock.io/api/${api}`).then(response => {
    this.Month = response.data.checkInData.Month;
    this.Stat = response.data.checkInData.CheckedInStat;
    this.TotalTarget = response.data.checkInData.TotalTarget;
    this.$emit("TotTarget", this.TotalTarget);
    this.TargetForMonth = response.data.checkInData.CurrentAchieved;
    this.$emit("TotCount", this.TargetForMonth);
  });
}

我的 vue.js 代码反复从服务器获取数据

My vue.js code is getting data repeatedly from the server

javascript

vcalendar

vue.js