How to get the correct result when rendering a component?

Question

Vue.js

There is a component. He has:

async created() {
    buildRequestCurTour(this.$route.params.id)
    await this.getCurrentTour()
  },
  mounted() {
    console.log(this.currentTourGetter)
  },
  methods: {
    ...mapActions(['getCurrentTour'])
  },
  computed: {
    ...mapGetters(['currentTourGetter'])
  }

action is called like this:

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])
      }

Mutation

updateCurrentTour(state, currentTour) {
      state.currentTour = currentTour
    },

Getter
currentTourGetter: state => state.currentTour,

When mounted, an empty object is displayed in the console
How to display it so that the data is already in the state at that moment?

Answer 1

Well, everything is fine, the component does not wait for anyone and is mounted to itself synchronously. When the request fulfills then the value will be. Because it's a getter, vue will update everything when needed. Just show some spinner thread while currentTourGetter is empty.