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

Question

[Andy Oker]

Есть компонент. У него есть:

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 в консоли выводится пустой объект
Как вывести его, чтобы данные в стейте уже были в этот момент?

Comments

[MikUrrey]

Чтобы async работал, функция должна возвращать промиз:
return await this.getCurrentTour()
Но, по-моему, с created/mounted это все равно не прокатит, mounted не станет ждать.
Вы в итоге хотите добиться, чтобы currentTour выводился на странице после подкачки с сервера?

[Andy Oker]

MikUrrey, все верно. Я хочу сначала получить данные через Actions - getCurrentTour и положить их в стейт. После чего вызвать геттер. Но сейчас, как я понимаю, пока данные подтягиваются геттер уже вызывается с первоначально пустым объектом.

Answer 1

[Aetae]

Ну, всё нормально, компонент никого не ждёт и монтируется себе синхронно. Когда запрос отработает тогда значение и будет. Поскольку это геттер - то vue всё обновит когда надо. Просто показывайте какой-нить спиннер пока currentTourGetter пуст.