Как получить асинхронное состояние vuex?

Question

[wlms]

store/profile.js

import Axios from 'axios'

const state = {
  profile: null
}

const actions = {
 loadProfileOnce: async ({commit}, id) => {
    try {
      const {data} = await Axios.get('http://127.0.0.1:3001/api/profile/' + id)
      console.log(data)
      if (data) {
        commit('loadProfileOnce', data)
      } else {
        console.log('errorororo')
      }
    } catch (error) {
      throw error
    }
  }
}

const mutations = {
  loadProfileOnce: (state, payload) => {
    state.profile = payload
  }
}

const getters = {
  getOneProfile: state => {
    return state.profile
  }
}

В компоненте пишу так:

profile.vue

created () {
    this.$store.dispatch('loadProfileOnce', this.profileId)
  },
  computed: {
    ...mapGetters(['getOneProfile'])
  },

Приходит объект. Когда я обращаюсь к {{ getOneProfile}}, нормально выводит объект, а когда я вывожу свойство в шаблоне {{ getOneProfile.profile.name }}, вываливаются ошибки при рендринге. ПОНЯТНО, что дело в асинхронности. Я не понимаю, что я делаю не так, и как исправить, чтобы это заработало.

Answer 1

[0xD34F]

getOneProfile: state => {
  return state.profile
}

{{ getOneProfile.profile.name }}

То есть, у state.profile есть свойство profile? Типа, можно было бы и $store.state.profile.profile.name написать? Подозреваю, что profile всё-таки лишний. Ну и чтобы не пытаться выводить данные, которых пока нет, используйте условный рендеринг:

<КакойТоКомпонент v-if="данные">

UPD. Вынесено из комментариев:

Я думал, нужно делать какой то лоадер, пока данные идут?

Ну сделайте:

<КакойТоКомпонент v-if="данные" />
<ИндикаторЗагрузки v-else />

Comments

[wlms]

А вообще условный рендринг является бест-практис для асинхронных запросов? Я думал, нужно делать какой то лоадер, пока данные идут?

[0xD34F]

А вообще условный рендринг является бест-практис для асинхронных запросов?

Я не знаю, что такое "бест-практис".

Я думал, нужно делать какой то лоадер, пока данные идут?

Дополнил ответ.

Картинка - зачем она? Затрудняетесь самостоятельно разобраться, сколько там у вас вложенных profile?

Answer 2

[Александр Дроздов]

{{ getOneProfile.profile.name }}

getOneProfile возвращает уже profile, может в этом проблема? попробуй {{ getOneProfile.name }}

К тому же попробуй vue инпектором посмотреть что у тебя в state лежит в момент обращения

Comments

[wlms]

Второй профайл тот, что возвращает сервер. Т.е. Первой профайл из state , а второй уже объект от сервера.

[Александр Дроздов]

wlms, ну всей картины не видно, но товарищ 0xD34F предложил один из вариантов, может сработает.

Answer 3

[Владимир]

Вам просто надо указать Vue чтобы он подождал. Т.е. сделать created асинхронной.

async created () {
   await this.$store.dispatch('loadProfileOnce', this.profileId)
  },

Comments

[wlms]

не работает