Vue, error [vuex] do not mutate vuex store state outside mutation handlers

Question

Here is original code. Very simple, sign in form. We have Email field, password. It takes this parameters and on clicking submit button it checks the user and writes his user.uid into Vuex. But I'm getting error which is listed above in title. I did research and it looks like it's a common issue in Vuex, due to those fields at some point updating Vuex store 'on a fly' which is false in my case, cause it only updates Vuex store when you press a submit button. Anyhow decided corrected to be look like this and still have no luck

original code

<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>

my vuex

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

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

my try to fix issue which still had no luck, gives same error

<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>

Try to reproduce your issue in a codesandbox, so it will be clear to find the actual issue — Stark Buttowski

Ahmad_kh Ahmad_kh · Accepted Answer · 2020-07-11T18:43:00

You have to use mutations like this:

<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>

Vue, error [vuex] do not mutate vuex store state outside mutation handlers

1 Answers