我从子组件中发出一个GraphQL
请求,并将结果成功发送到父组件。
我将其重构为 VUEX ,而不是在父组件中存储和更新结果数组。
收到结果后,我使用this.$store.dispatch('handle', payload)
方法将事件调度到我的商店。
然后触发一个突变,从而成功更新商店:
UPDATE_RESULT(state, result) {
state.queries[state.search.selectedQuery].results[result.index] = {
...result
}
}
回到我的父组件中,我使用mapState({})
帮助器将结果数组映射到计算属性。在Vue开发工具中,我可以确认商店更新和计算所得的属性都在我的组件上成功更新:
computed: {
...mapState({
results: state => state.queries[state.search.selectedQuery].results
})
},
但是我的模板拒绝更新:
<template v-for="(result, index) in results">{{result}}</template>
我可以看到,模板似乎在计算属性和商店之后一格。我已经尝试过使用观察器,getter和setter,具有本地结果数组并将存储复制到此…,但是除了setTimeout之外,什么都没有。
拔出我的头发!!!