@lleballex

Почему во Vue.JS мутации вызываются в самом конце?

У меня есть проект на Vue.JS. В App.vue, при создании, я кидаю запрос на сервер с API, после чего мне приходят данные пользователя (checkAuthToken). Затем в другом объекте, при создании, я отправляю также запрос на сервер, но уже использую айдишник юзера, который приходит в первом запросе (getUser).
Запросы я делаю так:
axios.get('...', {...}).then(response => {commit('setUserInfo', response.data ...)}).catch(...)
. В then я и ставлю данные пользователя через мутации. Вроде бы все должно работать. Но возникает проблема. Сначала вызывается checkAuthToken, затем getUser и только потом мутации, которые ставят данные пользователя (в том числе айдишник). Почему они вызываются в самом конце, а не вначале, и как это исправить?
И еще, мне кажется, это все связано с await.

В App.vue:
async created() {
  var result = await this.$store.dispatch('checkAuthToken', {
    token: auth_token
  })
  ...
}

В другом vue:
async created() {
  var result = await this.$store.dispatch('getUser', {
    id: this.$store.getters.userId     // мутации, которые ставят айди еще не вызывались, возникает ошибка
  })
  ...
}
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Ну вот представьте: сидите дома, решили сожрать пиццу. Значит, что надо сделать - заказать пиццу, подождать, пока курьер её привезёт. Ну а как привезёт, можно и сожрать. И вы спрашиваете: а почему начинать жрать пиццу можно только после того, как её привезут? Как это исправить, как начать жрать пиццу сразу после заказа? Да никак блин, будете сидеть и ждать, сидеть и ждать, сидеть и ждать.

Сидеть и ждать вы можете по-разному:

Вариант раз - не создавать экземпляр компонента, который требует id пользователя для корректной работы до тех пор, пока он не будут получен:

<компонент-которому-нужен-id-пользователя v-if="$store.getters.userId">

Вариант два - следить за id пользователя, и выполнять действия, которые его требуют только когда он есть:

watch: {
  '$store.getters.userId': {
    immediate: true,
    handler(userId) {
      if (userId) {
        ...
      }
    },
  },
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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