Vuex Getter页面刷新后传动态props id无法获取store数据问题求助

问题根因 #

你遇到的问题核心是类型不匹配导致严格相等判断失效，附加存在一处action逻辑缺陷：

1. 你在getter中使用===做严格相等判断，this.id作为组件prop传入时是字符串类型，而store中存储的playerId是数字类型，两者类型不一致导致匹配失败；你硬编码传入数字6时类型匹配，所以可以正常返回结果。
2. 你的fetchPlayer action存在逻辑缺陷：当判定玩家已存在于store中时，直接返回undefined而非Promise对象，会导致dispatch后的then回调出现时序异常。

修复方案 #

第一步：解决类型匹配问题 #

你可以任选以下任意一种方案修复：

• 方案1：父组件传参时保证id为数字类型，使用v-bind绑定prop，示例：

  <!-- 错误写法，传的值是字符串 -->
  <Player id="60" />
  <!-- 正确写法，传的值是数字 -->
  <Player :id="60" />
  

• 方案2：修改getter逻辑，统一将入参转为数字后再做比较：

  getPlayerById: state => id => {
    return state.players.find(plr => plr.playerId === Number(id));
  },
  

第二步：修复action逻辑缺陷 #

修改fetchPlayer中玩家已存在时的返回逻辑，保证始终返回Promise对象：

if (getters.getIndexByPlayerId(id) != -1) {
  return Promise.resolve();
}

内容的提问来源于stack exchange，提问作者MeNeedHelp