0

Приложение на Vue.js.

Произвожу авторизацию с использованием Firebase.

Хочу ID пользователя сохранить в State Vuex.

В компоненте Vue форма и метод авторизации:

signIn() {
  auth
    .signInWithEmailAndPassword(this.uEmail, this.uPassword)
    .then(function(user) {
      console.log('Получен ID:', user.user.uid); // Для проверки авторизации
      this.$store.commit("signIn", user.user.uid);
    })
    .catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
    });
}

В Store Vuex мутация:

mutation: {
    signIn(state, payload) {
      console.log('commit signIn run'); // Для проверки выполнения метода
      state.uid = payload;
    } 
}

Авторизация успешно проходит, uid выводится в консоль (в качестве проверки из компонента), а вот метод signIn в мутации в Store не срабатывает (Store, разумеется определен глобально). Сообщение в консоль из Store не выводится, значение state не изменяется. Может дело в промисе, в том что мутация вызывается до его завершения?..

Почему не срабатывает метод в мутации, и как подобную задачу можно реализовать?

1 ответ 1

2

Сложно судить о системе в целом по фрагментам кода. К тому же вы используете глобальные переменные, объявленные через var.

Асинхронные операции выполняются в actions, откуда по результатам запроса запускаются мутации.

// Где-то в компоненте.

methods: {
  ...mapActions({
    login: 'auth/login'
  }),

  async signIn() {
    // Оберните в try...catch.
    await this.login({
      mail: this.uEmail,
      password: this.uPassword
    })
  }
}
// Где-то в хранилище.

const AUTH_SUCCESS = 'AUTH_SUCCESS'

// ... остальной код

mutations: {
  [AUTH_SUCCESS](state, data) {
    state.uid = data.uid;
  }
},

actions: {
  login(context, credentials) {
    return auth
      .signInWithEmailAndPassword(credentials.mail, credentials.password)
      .then(function(response) {
        context.commit('AUTH_SUCCESS', response.user);

        return response;
      })
      .catch(function(error) {
        context.commit('AUTH_ERROR');

        throw error
      });
  }

}

Если вы решили воспользоваться vuex, то вас ждет много писанины, и конструкции типа this.$store.commit вызовут огромное количество проблем.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.