如何从Vuex Store更新Vue子组件？currentSpelerCard为pending问题排查

• 核心错误出在Vuex的fetchSpelerCards action的fetch异步逻辑处理上：res.json()是异步方法，返回值为Promise对象，你未等待该Promise完成解析，就直接将其赋值给data变量提交到了Vuex store，因此store里存储的currentSpelerCard是未完成的Promise实例，而非实际解析后的卡片数据。
• 其次你当前的fetch链式调用结构不合理，第一个then回调中没有返回解析后的JSON数据，导致后续then回调无法拿到实际接口返回内容。

1. 修改actions.js中的fetchSpelerCards逻辑 #

修正后的代码如下：

export const fetchSpelerCards = ({commit}, speler_id) => {
    return new Promise((resolve, reject) => {     
        fetch(`api/cardsBySpeler/${speler_id}`)
        .then(res => {
            if (res.status === 200) {
                // 返回res.json()的Promise实例给下一个then
                return res.json()
            }
            // 非200状态直接抛出错误进入catch分支
            throw new Error('Er is geen kaart beschikbaar')
        })
        .then(parsedCardData => {
            // 这里拿到的parsedCardData才是实际的卡片数据
            commit('SET_PLAYER_CARD', parsedCardData);
            resolve('Kaart gevonden');
        })
        .catch(err => {
            reject(err.message);
        });
    })
}

如果要简化代码，可以不用手动包裹Promise，fetch本身返回的就是Promise，简化版代码如下：

export const fetchSpelerCards = ({commit}, speler_id) => {
  return fetch(`api/cardsBySpeler/${speler_id}`)
    .then(res => {
      if (res.status !== 200) throw new Error('Er is geen kaart beschikbaar')
      return res.json()
    })
    .then(parsedCardData => {
      commit('SET_PLAYER_CARD', parsedCardData)
      return 'Kaart gevonden'
    })
}

2. 修正CardsSpeler组件的模板逻辑 #

你当前模板中用v-for="card in cards"遍历cards变量，但是循环体内渲染的都是currentSpelerCard的属性，这个逻辑明显错误：

• 如果currentSpelerCard是单张卡片对象，直接删除外层v-for即可，直接渲染currentSpelerCard的属性
• 如果currentSpelerCard是卡片数组，把v-for修改为v-for="card in currentSpelerCard" :key="card.id"，循环体内渲染card.title、card.description等属性即可。

内容的提问来源于stack exchange，提问作者M.Koops