由于AJAX调用，Vue没有刷新计算的属性。

Question

我的前端由vue，vue-router和vuex组成。我有一个视图，在安装时，做2个AJAX调用和一个计算。

• 获取所有玩家的列表
• 获取所有匹配列表
• 在承诺2中，计算每一个球员的统计数据

这是我的 "Scores.vue"

<template>
  <v-app>
    <table class="table is-striped is-fullwidth scoreboard">
      <thead>
      </thead>
      <tbody>
        <ScoreboardPlayer
          v-for="(player, index) in sortedPlayerList"
          :key="index"
          :player="player"
          :index="player.playerID"
        >
        </ScoreboardPlayer>
      </tbody>
    </table>
  </v-app>
</template>

<script>
import ScoreboardPlayer from "../components/ScoreboardPlayer.vue";
import { mapGetters, mapActions } from "vuex";

export default {
  data() {},
  components: {
    ScoreboardPlayer
  },
  computed: {
    ...mapGetters("gamesModule", ["gamesList", "getStatsOfPlayer"]),
    ...mapGetters("playersModule", ["getSortedPlayerList"]),
    sortedPlayerList() {
      return this.getSortedPlayerList(this.currentOrder, this.orderProperty);
    }
  },
  methods: {
    ...mapActions("playersModule", ["getPlayers", "addPlayerStats"]),
    ...mapActions("gamesModule", ["getGames"]),
    calculatePlayerStats() {
      this.sortedPlayerList.forEach(player => {
        let stats = this.getStatsOfPlayer(player.playername);
        this.addPlayerStats(stats);
      });
    },
  },
  created() {
    this.getPlayers();
    this.getGames().then(() => {
      this.calculatePlayerStats()
    });
  }
};

数据保存在一个商店里，一个是 "游戏 "模块，一个是 "玩家"。AJAX调用和计算是在他们的动作中进行的。

在这个视图中，我有一个v-for，它遍历玩家，并创建了一个 玩家 组件。然后，这将显示其分配的球员的统计信息。要做到这一点，它获得索引作为道具，并通过计算方法从商店中获得相应的球员。

这是我的 "ScoreboardPlayer.vue"

<template>
  <tr>
    <td>{{ player.playername }}</td>
    <td>{{ player.wins }}</td>
    <td>{{ player.losses }}</td>
    <td>{{ player.draws }}</td>
    <td>{{ player.playedGames }}</td>
    <td>{{ player.score }}</td>
  </tr>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    index: { type: Number }
  },
  computed: {
    ...mapGetters("playersModule", ["playerList", "getPlayerNameById"]),
    player() {
      return this.playerList.find(player => {
        return player.playerID == this.index;
      });
    }
  },
};
</script>

<style lang="scss"></style>

这是我的 "actions.js "和 "state.js"

export default {
  async getPlayers({ commit }) {
    let players = [];
    await Axios.get("http://XXX/api/players/getPlayers.php").then(
      response => {
        response.data.forEach(element => {
          let player = {
            playername: element.playerName,
            playerID: parseInt(element.dbID),
            firstname: element.firstName,
            lastname: element.lastName,
            city: element.city.cityName,
            isDisabled: false
          };
          players.push(player);
        });
      }
    );
    players.forEach(player => {
      commit("ADD_PLAYER", player);
    });
  },
  addPlayerStats: (context, stats) =>{
    context.commit("ADD_PLAYERSTATS", stats)
  },
};



______________________



export default {
  playerList: [
    {
      city: "",
      draws: 0,
      firstname: "",
      isDisabled: false,
      lastname: "",
      losses: 0,
      playedGames: 0,
      playerID: 0,
      playername: "",
      score: 0,
      wins: 0
    }
  ],
  cityList: []
};

问题是，在计算球员统计数据时，两个AJAX调用都完成后，所以 玩家 组件被创建，然后我才知道统计信息。所以这些组件只显示名字，所有的统计都是空的，但是如果我用dev-tools分析computed属性，它有每个玩家的统计，只是没有显示出来，因为它们是在组件被创建后才计算出来的。

我想这应该是vue和vuex的目的，这样我就可以在所有组件上拥有相同的数据，并且它们会自动刷新？

如果我在外部视图上触发了一个排序方法，那么我就会在外部视图上触发一个排序方法。玩家 组件被刷新并显示它们的状态。

我已经尝试过使用forceUpdate()，但我只是得到错误信息，它不是一个函数。

TypeError: vue__WEBPACK_IMPORTED_MODULE_3__.default.forceUpdate is not a function