javascript - Vuex 竞争条件

Question

这里是 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),
});

setter/getter 是这样的:

export const itemGetters = {
  allItems: state => state.items,
  itemById: (state, getters) => id => getters.allItems.filter(s => s.id === id)[0],
};

现在，我有了这个 View ，其中有一个嵌套 View 。基本上是每个项目的信息模式。

如果我点击链接，我希望看到填充了项目的元素模态。

export default {
  name: 'Landing',
  computed: {
    items() {
      return this.$store.getters.allItems;
    }
  },
  created() {
    if (this.items.length === 0) {
      this.$store.dispatch('allItems');
    }
  }
};

现在，进入该 View 会按预期工作，如果我单击嵌套 View ，如下所示:

<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 中获取项目，如果它还不存在，但我真的不明白这一点，因为我最终会拥有所有这些。

我需要在这里做什么？

Answer 1

问题是计算属性在组件生命周期的早期就得到评估。

如果您知道该项目最终(并且很快)会在那里，当该项目还不存在时，只需在计算中返回一个默认值，这样 Vue 就有东西要渲染(甚至如果为空)在第一次执行中:

  computed: {
    item() {
      return this.$store.getters.itemById(this.id) || {}; // added {} as default.
    }
  }

一旦项目可用，计算将自动重新评估(因为 getter 会)。