Порядок пропсов, вычисленных и созданных в vuejs / vuex

У меня есть вопрос о правильном порядке манипулирования реквизитами, вычисленными и созданными с помощью vue и vuex.

У меня есть следующий код

<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {}
    },
    props: ['id'],
    methods: {
    },
    computed: {
      ...mapGetters({
        semestre: 'semestre/show/item'
      }),
      titre: function () {
        return this.semestre.nom
      }
    },
    created () {
      this.$store.dispatch('semestre/show/retrieve', parseInt(this.id))
    }
  }
</script>

Но у меня есть ошибка в вычисленном титре, который манипулирует неопределенной переменной "семестр".

Кажется, что вычисленное выполняется перед созданием. Поэтому, если я попытаюсь использовать beforeCreate вместо Created, это не сработает, потому что props не существует.

Я так думаю

beforeCreate => Props => Computed => Created?

Но как я могу правильно выполнить свой код? Мне нужно получить значение в реквизитах, передать это значение в vuex, а затем манипулировать результатом VueX. Может, я чего-то не понимаю в логике vue / vueX.

Спасибо

Дэйвид


javascript vue.js vuex
person DAnnebicque    schedule 15.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если ваше вычисленное значение используется в представлении, тогда да, оно будет вычислено до того, как будет предоставлено semestre, поскольку кажется, что ваше действие vuex является асинхронным. Если это асинхронно, ваша created функция завершит выполнение до завершения действия. Из-за этого геттер 'semestre/show/item' всегда будет возвращать неопределенное значение, пока действие 'semestre/show/retrieve' не будет полностью завершено, что не произойдет до завершения выполнения created.

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

titre: function () {
    return this.semestre && this.semestre.nom;
    //or if you want to provide a default value
    return (this.semestre && this.semestre.nom) || '??';
}

Более надежное решение - это решение, при котором вы сообщаете своему пользователю, что значения загружаются, отслеживая, завершено ли ваше действие или нет.

<template>
    <div v-if="isLoading">Content is load (you could display a spinner)</div>
    <div v-else>
        Display your semestre content here:
        {{titre}}
    </div>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {
          isLoading: false,
      };
    },
    props: ['id'],
    computed: {
      ...mapGetters({
        semestre: 'semestre/show/item'
      }),
      titre: function () {
        return this.semestre.nom
      }
    },
    async created () {
      this.isLoading = true;
      await this.$store.dispatch('semestre/show/retrieve', parseInt(this.id))
      this.isLoading = false;
    }
  }
</script>

И если вы не можете использовать ключевые слова async / await, вы можете сделать следующее:

created () {
    this.isLoading = true;
    this.$store.dispatch('semestre/show/retrieve', parseInt(this.id))
        .then(() => {
            this.isLoading = false;
        });
}
person kmc059000    schedule 15.12.2017