组件中 vue 数据对象的状态问题

Question

我正在更新我的原始 vue 项目，并收到一个带有数据对象 sports_feeds_boxscores_* 的错误。该网站有三个标签来下拉三个主要联赛的分数。我现在正在为每场比赛添加球员统计数据。我第一次打棒球，一切都很好。现在我在踢足球，问题就出现了。我为每个联赛的统计数据设置了三个对象。 nfl 还包含一个对象，其中包含他们在一周中的三天比赛。正在发生的事情是周日的统计数据被拉低了，但是周四的统计数据应该只有一场比赛，而不是所有周日的比赛加上一场星期四的比赛。然后星期一除了星期一之外还有星期日和星期四的结果。我已将所有组件以及组件道具的三个单独数据对象分开。如果我首先单击 nfl 选项卡，然后转到 mlb 选项卡，则 nfl 数据对象的所有结果都在 sports_feeds_boxscores_mlb 中。我设置了一个站点 here 以更好地了解使用 Vue.js 开发工具的过程。以下是相关代码：

index.html:

<component
            v-if="currentTabComponent === 'tab-mlb'"
            v-bind:is="currentTabComponent"
            v-bind:props_league_data="sports_feeds_data"
            v-bind:props_league_standings="standings"
            v-bind:props_baseball_playoffs="baseball_playoffs"
            v-bind:props_end_of_season="end_of_season[this.currentTab.toLowerCase()]"
            v-bind:props_box_game_scores_mlb="sports_feeds_boxscores_mlb"
            class="tab"
          >
          </component>

          <component
            v-if="currentTabComponent === 'tab-nfl'"
            v-bind:is="currentTabComponent"
            v-bind:props_league_data="sports_feeds_data"
            v-bind:props_league_data_nfl="nfl_feeds"
            v-bind:props_league_standings="standings"
            v-bind:props_nfl_playoffs="nfl_playoffs"
            v-bind:props_end_of_season="end_of_season[this.currentTab.toLowerCase()]"
            v-bind:props_box_game_scores_nfl="sports_feeds_boxscores_nfl"
            class="tab"
          >
          </component>

vue.js：

data() {
    return {
      sports_feeds_boxscores_mlb: null,
      sports_feeds_boxscores_nfl: {
        sun: null,
        mon: null,
        thurs: null
      },
      sports_feeds_boxscores_nba: null,
        etc

/* Component Code */
// First let's get the Game and BoxScores Data
        const nflScores = async () => {
          this.nfl_feeds.sunday_data = await getScores(
            nflDate.sundayDate,
            config
          );

          this.nfl_feeds.thurs_data = await getScores(
            nflDate.thursdayDate,
            config
          );

          this.nfl_feeds.mon_data = await getScores(nflDate.mondayDate, config);

          // Next we need the gameid's to retrieve the game boxscores for each day
          this.nfl_feeds.sunday_data.forEach(function(item, index) {
            if (item.isCompleted === "true") {
              nflGameIDs.sunday[index] = item.game.ID;
            }
          });

          this.nfl_feeds.thurs_data.forEach(function(item, index) {
            if (item.isCompleted === "true") {
              nflGameIDs.thursday[index] = item.game.ID;
            }
          });

          this.nfl_feeds.mon_data.forEach(function(item, index) {
            if (item.isCompleted === "true") {
              nflGameIDs.monday[index] = item.game.ID;
            }
          });

// Check if boxscores have been retrieved on previous tab click for each day
          // if not retrieve the boxscores
          this.sports_feeds_boxscores_nfl.sun =
            this.sports_feeds_boxscores_nfl.sun ||
            (await getBoxScores(nflGameIDs.sunday, url, params));


          this.sports_feeds_boxscores_nfl.thurs =

            (await getBoxScores(nflGameIDs.thursday, url, params));

          this.sports_feeds_boxscores_nfl.mon =
            this.sports_feeds_boxscores_nfl.mon ||
            (await getBoxScores(nflGameIDs.monday, url, params));

}; /* End nflScores Async function */

getBoxScores.js：

try {
  const getBoxScores = async (gameIDs, myUrl, params) => {
    gameIDs.forEach(function(item) {
      promises.push(
        axios({
          method: "get",
          headers: {
            Authorization:
              "Basic &&*&&^&&=="
          },
          url: myUrl + item,
          params: params
        })
      );
    });

    // axios.all returns a single Promise that resolves when all of the promises passed
    // as an iterable have resolved. This single promise, when resolved, is passed to the
    // "then" and into the "values" parameter.
    await axios.all(promises).then(function(values) {
      boxScores = values;
    });
    console.log(`boxScores is ${boxScores.length}`)
    return boxScores;
  };

  module.exports = getBoxScores;
} catch (err) {
    console.log(err);
}

我已经拆分了所有 sports_feeds_boxscores 对象，不知道它们为什么共享状态？？？抱歉这个问题很冗长，但它有点复杂。这就是为什么我提供了一个站点，您可以在其中看到例如 this.sports_feeds_boxscores_nfl.thurs 在调用 API 后有 14 个元素而不是一个元素。如果在 nfl 选项卡之后单击 mlb 选项卡，则 mlb 结果包括 nfl 结果。我非常感谢帮助解决这个问题。提前致谢... 更新： 我添加了 getBoxScores.js，因为我似乎从这个调用中返回了额外的统计信息。

Answer 1

这是我的错。我没有意识到我在 getBoxScores.js 中创建了一个闭包：

let boxScores = [];
let promises = [];

try {
  const getBoxScores = async (gameIDs, myUrl, params) => {
   gameIDs.forEach(function(item) {
      promises.push(
        axios({
          method: "get",
          headers: {
            Authorization:
              "Basic &&^^&^&&^FGG="
          },
          url: myUrl + item,
          params: params
        })
      );
    });

在异步函数中移动声明很快解决了问题。呜呜呜呜！！！