Question

尝试解决使用 vuex 和 getter 时出现的页面刷新问题。我一定遗漏了一些关于反应性如何工作的东西，但在四处搜索和阅读有关反应性的 vue 页面后，我无法确定是什么。

举个例子，我有一个最初可以正常加载的组件：

创建生命周期调度操作以从 API 检索数据并推送到状态数组
组件中的计算属性使用 getter 检索数据（过滤数组到特定人员）
组件在数组中显示一些属性

当页面刷新时，似乎再次调用了该操作并检索了数据，但似乎 getter 无法正常工作以获取新数据并且页面未加载。如果我测试直接访问状态中的数据，则刷新工作正常。所以看起来数据在刷新时正确加载到状态但getter不知何故没有它？

感谢任何帮助！

Component:
<script>
export default {
  props: ["id"],

  computed: {
    player() {
      return this.$store.getters["player/getPlayerById"](this.id);
    }
  },
  created() {
    this.$store.dispatch("player/fetchPlayer", this.id);
  }
};
</script>

getter:
getPlayerById: state => id => {
    return state.players.find(plr => plr.PlayerID === id);
  }

action: 
    var promise = EventService.getPlayer(id)
      .then(response => {
        commit("ADD_PLAYER", response.data);
      })
  
ADD_PLAYER mutation:
  ADD_PLAYER(state, player) {
    state.players.push(player[0]);
  }

使用 vuex 和 getter 刷新时未加载页面

0 个答案: