Почему не вызывается метод в mutations?

133

31 января 2021, 23:00

Приложение на 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 не изменяется. Может дело в промисе, в том что мутация вызывается до его завершения?..

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

Answer 1

Сложно судить о системе в целом по фрагментам кода. К тому же вы используете глобальные переменные, объявленные через 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 вызовут огромное количество проблем.