Ashlis
@Ashlis

Как получить корректный результат при рендеринге компонента?

Есть компонент. У него есть:
async created() {
    buildRequestCurTour(this.$route.params.id)
    await this.getCurrentTour()
  },
  mounted() {
    console.log(this.currentTourGetter)
  },
  methods: {
    ...mapActions(['getCurrentTour'])
  },
  computed: {
    ...mapGetters(['currentTourGetter'])
  }


action вызывается такой:
async getCurrentTour(ctx) {
        const res = await fetch(apiUrl, {
          method: 'POST',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json'
          },
          redirect: 'follow',
          referrerPolicy: 'no-referrer',
          body: JSON.stringify(this.getters.requestCurTourGetter)
        })
        
        const tour = await res.json()

        ctx.commit('updateCurrentTour', tour.hits.hits[0])
      }


Мутация
updateCurrentTour(state, currentTour) {
      state.currentTour = currentTour
    },


Геттер
currentTourGetter: state => state.currentTour,

При mounted в консоли выводится пустой объект
Как вывести его, чтобы данные в стейте уже были в этот момент?
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Ну, всё нормально, компонент никого не ждёт и монтируется себе синхронно. Когда запрос отработает тогда значение и будет. Поскольку это геттер - то vue всё обновит когда надо. Просто показывайте какой-нить спиннер пока currentTourGetter пуст.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы