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

Question

[vilaugra]

У меня есть проект на 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     // мутации, которые ставят айди еще не вызывались, возникает ошибка
  })
  ...
}

Answer 1

[0xD34F]

Ну вот представьте: сидите дома, решили сожрать пиццу. Значит, что надо сделать - заказать пиццу, подождать, пока курьер её привезёт. Ну а как привезёт, можно и сожрать. И вы спрашиваете: а почему начинать жрать пиццу можно только после того, как её привезут? Как это исправить, как начать жрать пиццу сразу после заказа? Да никак блин, будете сидеть и ждать, сидеть и ждать, сидеть и ждать.

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

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

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

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

watch: {
  '$store.getters.userId': {
    immediate: true,
    handler(userId) {
      if (userId) {
        ...
      }
    },
  },
},

Comments

[vilaugra]

А можно это как-то в router прописать? Потому что компонентов много, и почти для каждого необходим айди

[0xD34F]

lleballex, может, вам тогда лучше инициализировать приложение после загрузки пользователя?

store.dispatch('checkAuthToken', { ... }).then(() => {
  new Vue({ ... });
});

UPD. Ещё можете через метаданные обозначить маршруты, которым нужны данные пользователя, и в beforeEach выполнять соответствующую проверку, в случае отсутствия запрашивать загрузку и разрешать переход после её окончания:

router.beforeEach((to, from, next) => {
  if (to.matched.some(n => n.meta.requiresUser) && !store.getters.userId) {
    store.dispatch('checkAuthToken').then(() => next());
  } else {
    next();
  }
});

[vilaugra]

Хорошая идея, попробую

[vilaugra]

Да, спасибо, все работает

[semki096]

сразу видно что человек проголодался ))