组件中使用的 Vuex getter 在控制台中显示错误，因为在调用它们时，Vuex 状态属性仍然为空

Question

我将 GET 请求的结果分配给我的 Vuex 状态属性，所以它们不能立即可用是很自然的，但是，我也有这样的 getter：

findChampion: (state) => (id) => {
let championId = id.toString();
let champion = Object.values(state.champions).find(value => value.key === championId);
return champion
}

它是从我的一个组件调用的，似乎在第一次调用时，state.champions属性仍然null这在我的组件中给了我很多错误。

这是我从组件调用 getter 的方式：

<img :src="'http://ddragon.leagueoflegends.com/cdn/' + $store.getters.version + '/img/champion/' + $store.getters.findChampion(this.match.mainParticipant.championId).image.full" alt="">

那么我怎样才能让我的组件在调用 getter 之前等待我的 Vuex 状态不为空呢？

错误TypeError: Cannot convert undefined or null to object

Answer 1

我想到了两个选项。

1. 将默认状态值设置为 null 以外的值。所以对于这个错误：

TypeError: Cannot convert undefined or null to object

尝试将该状态的默认值设置为{}。

在
2. 尝试使用它之前，在某处添加一个检查，以确定状态值是您所期望的。

例如，在findChampion函数中，您可以先检查状态值，如下所示：

findChampion: (state) => (id) => {
if (!state.champions) {
return []; // or whatever is appropriate to return
}
let championId = id.toString();
let champion = Object.values(state.champions).find(value => value.key === championId);
return champion
}

Answer 2

我认为你需要检查一下state.champions之前是否存在。像这样：

findChampion: (state) => (id) => {
let championId = id.toString()
let champion = state.champions ? Object.values(state.champions).find(value => value.key === championId) : []
return champion
}

： [] 返回一个空数组，您可以返回 null、false、undefined 或任何其他您需要的东西。

请检查这是否有效，并告诉我。