Vue, ошибка [vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций

Question

Вот оригинальный код. Очень просто, войдите в форму. У нас есть поле для электронной почты, пароль. Он принимает эти параметры и при нажатии кнопки отправки проверяет пользователя и записывает его user.uid в Vuex. Но я получаю ошибку, указанную выше в заголовке. Я провел исследование, и похоже, что это обычная проблема во Vuex из-за того, что эти поля в какой-то момент обновляют хранилище Vuex «на лету», что в моем случае неверно, потому что он обновляет хранилище Vuex только при нажатии кнопки отправки. Как бы то ни было, решил исправить, чтобы он выглядел как это и все еще не повезло

исходный код

<template>
      <div class="form__inner">
          <div class="overlay" @click="$store.commit('logReg/logIn')"></div>
          <v-container
            fill-height
            fluid>
            <v-row
              align="center"
              justify="center">
              <v-col cols="2">
                <v-card>
                  <v-card-title>
                    Log in
                  </v-card-title>
                  <v-card-text>
                    <v-text-field placeholder="Email"
                                  v-model="logIn"/>
                    <v-text-field placeholder="Password"
                                  v-model="password"/>
                  </v-card-text>
                  <v-card-actions>
                    <v-btn color="success"
                           class="mx-auto"
                           @click="signIn">Log me in</v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
      </div>
    
    </template>
    
    <script>
      export default {
        data(){
          return {
            logIn: '',
            password: ''
          }
        },
        methods:  {
          async signIn(){
            let res = await this.$fireAuth.signInWithEmailAndPassword(this.logIn, this.password);
            this.$store.commit('userState', res);
          }
        }
      }
    </script>

мой vuex

export const state = () => ({
  user: null
})

export const mutations = {
  userState(state, authUser){
    state.user = authUser;
  }
}

моя попытка исправить проблему, с которой все еще не повезло, дает ту же ошибку

<template>
  <div class="form__inner">
      <div class="overlay" @click="$store.commit('logReg/logIn')"></div>
      <v-container
        fill-height
        fluid>
        <v-row
          align="center"
          justify="center">
          <v-col cols="2">
            <v-card>
              <v-card-title>
                Log in
              </v-card-title>
              <v-card-text>
                <v-text-field placeholder="Email"
                              v-model="logIn"/>
                <v-text-field placeholder="Password"
                              v-model="password"/>
              </v-card-text>
              <v-card-actions>
                <v-btn color="success"
                       class="mx-auto"
                       @click="signIn">Log me in</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        logIn: '',
        password: ''
      }
    },
    computed: {
      logg: {
        get(){
          return this.logIn;
        },
        set(val){
          this.logIn = val;
        }
      },
      pass: {
        get(){
          return this.password;
        },
        set(val){
          this.password = val;
        }
      }
    },
    methods:  {
      async signIn(){
        let res = await this.$fireAuth.signInWithEmailAndPassword(this.logg, this.pass);
        this.$store.commit('userState', res);
      }
    }
  }
</script>

Answer 1

Вы должны использовать такие мутации:

<script>
  import {mapMutations} from 'vuex';
  export default {
    data(){
      return {
        logIn: '',
        password: ''
      }
    },
    methods:  {
      ...mapMutations({
           userState: 'userState'
      }),
      async signIn(){
        let res = await this.$fireAuth.signInWithEmailAndPassword(this.logIn,this.password);
        this.userState(res);
      }
    }
  }
</script>