Состояние гонки 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),
});

С геттерами так:

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, если его еще нет, но я не вижу смысла, потому что у меня все они будут в конце концов.

Что мне здесь делать?

Answer 1

Дело в том, что вычисленные свойства сначала оцениваются довольно рано в жизненном цикле компонентов.

Если вы знаете, что элемент в конечном итоге (и быстро) будет там, просто верните значение по умолчанию в вычисленном, когда элемент еще не существует, поэтому Vue должен что-то визуализировать (даже если пусто) в этом первом исполнении:

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

Вычисленное будет автоматически переоценено (потому что получатель получит), как только элемент станет доступным.