javascript - Vuex 竞争条件
问题描述
Vuex 的新手问题。可能是做错了什么。我有这个简单的商店:
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state: {
items: []
},
getters: Object.assign({}, itemGetters),
mutations: Object.assign({}, itemMutations),
actions: Object.assign({}, itemActions),
});
吸气剂是这样的:
export const itemGetters = {
allItems: state => state.items,
itemById: (state, getters) => id => getters.allItems.filter(s => s.id === id)[0],
};
现在,我有这个视图,其中有一个嵌套视图。基本上每个项目的信息模式。
如果我单击链接,我希望去查看填充了项目的元素模式。
export default {
name: 'Landing',
computed: {
items() {
return this.$store.getters.allItems;
}
},
created() {
if (this.items.length === 0) {
this.$store.dispatch('allItems');
}
}
};
现在,输入该视图按预期工作,如果我单击嵌套视图,如下所示:
<template>
<div class="text">
<h1 class="heading">{{ item.title }}</h1>
</div>
</template>
<script>
export default {
name: 'InfoModal',
props: ['id'],
computed: {
item() {
return this.$store.getters.itemById(this.id);
}
}
};
</script>
它也确实有效。但是,当我重新加载页面时它不起作用,并且由于还item
没有出现错误。
事情是我可以做同样的事情并添加一个动作来从 API 中获取项目,如果它还没有,但我真的不明白这一点,因为我最终会拥有所有这些。
我需要在这里做什么?
解决方案
问题是计算属性在组件生命周期的早期就被评估了。
如果您知道该项目最终(并且很快)会在那里,只需在该项目尚不存在时在计算中返回一个默认值,因此 Vue 在第一次执行时有一些要渲染的东西(即使是空的):
computed: {
item() {
return this.$store.getters.itemById(this.id) || {}; // added {} as default.
}
}
一旦项目可用,计算将自动重新评估(因为 getter 会)。
推荐阅读
- email - Save Gmail attachments to GDrive as ".../ eMailAddress / FileName"
- java - AtomicReference.compareAndSet(old,new) 是否保证 old.field 没有改变?
- modelica - 如何在 Dymola 中显示线性化结果?
- java - JUnit 5 + Cucumber 并行测试执行不适用于文件安全(Maven)
- database - Power BI - 如何在将报告上传到报告服务器之前删除数据
- clang - 将静态分析器模块加载为 Clang 插件
- reactjs - 无法点击添加按钮
- c++ - 为什么我不能在循环中使用 delete()?
- javascript - 重复单击图像后,如何将图像更改为其他版本?
- esp8266 - 为什么任何设备都无法识别原始信号,而连接到 esp8266 的 ir 接收器可以识别发射信号