Задать вопрос

Как заставить метод vuejs дождаться данных с сервера?

Народ, привет.
Пытаюсь подружиться с Vue.
До этого только бекенд. Делаю авторизацию в SPA приложении. Ситуация такая, при логине сохраняю в LocalStorage api_token и user_id. А уж потом в хранилище Vuex загружаю с сервера объект user. Все хорошо. Но когда нажимаю рефреш браузера, объект стирается с памяти, приходится подгружать с сервера user повторно. Без проблем, но это асинхронная операция и пока оно грузится везде в представление и логике выдает ошибки. user undefined. Я сделал переменную ready которая подтверждает что user загружен. Теперь везде проверяю, и чем дальше, тем чувствую, что я делаю "верх ногами" Подскажите куда копать? Как заставить метод vuejs дождаться данных с сервера?
  • Вопрос задан
  • 2715 просмотров
Подписаться 6 Оценить 2 комментария
Решения вопроса 2
@KoiLVeD
возможно Вам это поможет
vuex
const auth = {
  state: {
    authUser: null
  },
  actions: {
    nuxtServerInit ({ commit}, {req}) {
      if (req.session && req.session.authUser) {
        commit('SET_USER', req.session.authUser)
      }
    },
    login ({ commit, username, password}) {
      return axios.post('/api/loin', {
        username,
        password
      })
        .then((res) => {
          commit('SET_USER', res.data)
        })
        .catch((error) => {
          if (error.response.status === 401) {
            throw new Error('Bad credentials')
          }
        })
    },
    logout({ commit }) {
      return axios.post('/api/logout')
        .then(() => {
        commit('SET_USER', null)
        })
    }
  },
  mutations: {
    SET_USER: function (state, user) {
      state.authUser = user
    }
  }
};

vue
methods: {
      login () {
        this.$store.dispatch('login', {
          username: this.formUsername,
          password: this.formPassword,
        })
          .then(() => {
            this.formUsername = '';
            this.formPassword = '';
            this.formError = null;
            this.$router.push({ path: '/summary' });
          })
          .catch((e) => {
            this.formError = e.message
          });

      },
      logout () {
        this.$store.dispatch('logout')
      }
    }
Ответ написан
hrhr99
@hrhr99 Автор вопроса
Решение нашлось. Пока не подгрузится юзер, не показываем приложение
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
movasyl
@movasyl
semper tiro
Я не совсем понял вопрос, но думаю, что копать нужно в сторону коллбеков или промисов.
Ответ написан
Комментировать
@rurobud
Для ассинхронных действий надо использовать Actions.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы