title: Cannot read property 'email' of undefined; firebase auth(); using Vuex
body: <p>I am using vuex to store the logged in users email but when I try to commit the mutation which stores this email to a state object it throws this <code>error Cannot read property 'email' of undefined</code>.</p>
  <pre><code>//this is my action
  
      const actions = {
        login({ commit }, context, payload) {
          firebase
            .auth()
            .signInWithEmailAndPassword(payload.email, payload.password)
            .then(user =&gt; {
              let payloadUserEmail = user.user.email;
              console.log(payloadUserEmail);
              commit(&quot;SET_USER&quot;, payloadUserEmail);
            });
        }
      };
  
  //this is my mutation
  
  const mutations = {
    SET_USER(state, email) {
      state.userLoggedEmail = email;
      state.isLoggedIn = true;
    }
  };
  
  
  //this is my state
  
  const state = {
    userLoggedEmail: &quot;&quot;,
    isLoggedIn: false
  };
  </code></pre>
  <p>I always gives me this error when I try to commit the logged in user to state but when I console.log it out it shows.</p>
  <pre><code>//this is my login component 
  &lt;template&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot; col-sm-10 col-md-6 col-lg-4 mx-auto mt-4&quot;&gt;
          &lt;div class=&quot;card&quot;&gt;
            &lt;div class=&quot;card-header bg-dark&quot;&gt;
              &lt;span style=&quot;font-weight: bold; opacity: 1; color: white;&quot;
                &gt;Login&lt;/span
              &gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-body&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;label&gt;Email&lt;/label&gt;
                &lt;input
                  type=&quot;email&quot;
                  class=&quot;form-control&quot;
                  id=&quot;newStockName&quot;
                  placeholder=&quot;Enter Email&quot;
                  v-model=&quot;user.email&quot;
                /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;label&gt;Password&lt;/label&gt;
                &lt;input
                  type=&quot;password&quot;
                  class=&quot;form-control&quot;
                  id=&quot;newStockPrice&quot;
                  placeholder=&quot;Enter Password&quot;
                  v-model=&quot;user.password&quot;
                /&gt;
              &lt;/div&gt;
              &lt;button
                type=&quot;submit&quot;
                class=&quot;btn btn-primary btn-success btn-block&quot;
                @click=&quot;emailLogin()&quot;
              &gt;
                Login
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // import { mapActions } from &quot;vuex&quot;;
  
  export default {
    data() {
      return {
        user: {
          email: &quot;&quot;,
          password: &quot;&quot;
        }
      };
    },
    name: &quot;Login&quot;,
    methods: {
      emailLogin() {
        this.$store.dispatch(&quot;auth/login&quot;, {
          email: this.user.email,
          password: this.user.password
        });
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>This is what the error message shows it has two errors:</p>
  <pre><code>vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: &quot;TypeError: Cannot read property 'email' of undefined&quot;
  
  found in
  
  ---&gt; &lt;Login&gt; at src/components/authentication/Login.vue
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  warn @ vue.runtime.esm.js?2b0e:619
  logError @ vue.runtime.esm.js?2b0e:1884
  globalHandleError @ vue.runtime.esm.js?2b0e:1879
  handleError @ vue.runtime.esm.js?2b0e:1839
  invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
  invoker @ vue.runtime.esm.js?2b0e:2179
  original._wrapper @ vue.runtime.esm.js?2b0e:6917
  vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'email' of undefined
      at Store.login (auth.js?c7d4:17)
      at Array.wrappedActionHandler (vuex.esm.js?2f62:847)
      at Store.dispatch (vuex.esm.js?2f62:512)
      at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:402)
      at VueComponent.emailLogin (Login.vue?7463:61)
      at click (eval at ./node_modules/cache-loader/dist/cjs.js?{&quot;cacheDirectory&quot;:&quot;node_modules/.cache/vue-loader&quot;,&quot;cacheIdentifier&quot;:&quot;19ca99f4-vue-loader-template&quot;}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/authentication/Login.vue?vue&amp;type=template&amp;id=566f7c02&amp;scoped=true&amp; (app.js:1022), &lt;anonymous&gt;:77:32)
      at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
      at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
      at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
  </code></pre>