Почему это вычисленное свойство Vue не реагирует?

Question

Мне бы хотелось, чтобы мой вид, используя идентификатор, переданный в качестве реквизита, для поиска свойства объекта в магазине.Объект в хранилище появляется асинхронно, поэтому объект может отсутствовать не сразу.Я бы хотел, чтобы представление реагировало на возможное появление объекта.

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    widget () {
      let path = `widget/${this.id}`
      return this.$store.state.widgets[path]
    },
    title () {
      let widget = this.widget
      return (widget) ? widget.data().fullName : 'nothing to see here'
    }
  }
}
</script>

Используя инструменты отладки vuex, я могу наблюдать, как объект виджетов магазина начинается пустым, а затем устанавливается с помощью widgets: { 'widgets/someId': { ... } }, но мое vueпохоже, не принимает изменения.Название остается == 'Ничего ...'.

Я пытался сделать эти методы, но я получаю то же самое поведение.Я также попытался заменить весь объект widgets в магазине, вместо одной опоры за раз (я думаю, что это требование), но все же не повезло.

Я думаю, что мой вопрос очень похож на этот , но ответ здесь слишком краткий.Он просто говорит «использовать элемент данных», но я действительно не знаю, что это такое или как его использовать (или почему это сделает VUE реактивным).

Answer 1

Мутации следуют правилам реактивности Vue

Поскольку вы наблюдаете, как из пустого состояния появляются некоторые участники, вы попадаете в тупик от предупреждений об обнаружении изменений Vue .

Vue не может обнаружить добавление или удаление свойства.

Вам необходимо использовать Vue.set при добавлении или удалении членов, даже в Vuex.

Answer 2

Ваш виджет, скорее всего, не реагирует, потому что widget сам по себе не меняется, как и widget.data, потому что это определенная вами функция.Vue не «видит» изменения в данных при вызове data, потому что это функция.

У вас есть несколько способов сделать ваш виджет реактивным.Одним из них является предварительный расчет ваших данных и возвращение объекта без функций.Это может означать падение производительности, когда у вас много виджетов, даже если вам не нужны данные в большинстве из них.

Еще один вариант - использование потенциально новой функции getter ./ метод.Вы получите свои данные с помощью widget.data и получите виджет, подобный

{
  id: 1,
  get data() {
    // Whatever was in your function before
  }
}

Помните, что это (я считаю) функция Ecmascript 6, поэтому вам, вероятно, потребуется запустить ее через babel, чтобы быть совместимым свсе соответствующие браузеры.