无法读取未定义的属性“电子邮件”； firebase 身份验证（）；使用 Vuex

Posted 2023-02-23

【中文标题】无法读取未定义的属性“电子邮件”； firebase 身份验证（）；使用 Vuex

【英文标题】：Cannot read property 'email' of undefined; firebase auth(); using Vuex

【发布时间】：2020-10-31 22:37:48

【问题描述】：

我正在使用 vuex 来存储登录用户的电子邮件，但是当我尝试提交存储此电子邮件到状态对象的突变时，它会抛出此 error Cannot read property 'email' of undefined。

//this is my action

    const actions = 
      login( commit , context, payload) 
        firebase
          .auth()
          .signInWithEmailAndPassword(payload.email, payload.password)
          .then(user => 
            let payloadUserEmail = user.user.email;
            console.log(payloadUserEmail);
            commit("SET_USER", payloadUserEmail);
          );
      
    ;

//this is my mutation

const mutations = 
  SET_USER(state, email) 
    state.userLoggedEmail = email;
    state.isLoggedIn = true;
  
;


//this is my state

const state = 
  userLoggedEmail: "",
  isLoggedIn: false
;

当我尝试将登录的用户提交到 state 时，我总是给我这个错误，但是当我 console.log 它显示它时。

//this is my login component 
<template>
  <div class="container-fluid">
    <div class="row">
      <div class=" col-sm-10 col-md-6 col-lg-4 mx-auto mt-4">
        <div class="card">
          <div class="card-header bg-dark">
            <span style="font-weight: bold; opacity: 1; color: white;"
              >Login</span
            >
          </div>
          <div class="card-body">
            <div class="form-group">
              <label>Email</label>
              <input
                type="email"
                class="form-control"
                id="newStockName"
                placeholder="Enter Email"
                v-model="user.email"
              />
            </div>
            <div class="form-group">
              <label>Password</label>
              <input
                type="password"
                class="form-control"
                id="newStockPrice"
                placeholder="Enter Password"
                v-model="user.password"
              />
            </div>
            <button
              type="submit"
              class="btn btn-primary btn-success btn-block"
              @click="emailLogin()"
            >
              Login
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import  mapActions  from "vuex";

export default 
  data() 
    return 
      user: 
        email: "",
        password: ""
      
    ;
  ,
  name: "Login",
  methods: 
    emailLogin() 
      this.$store.dispatch("auth/login", 
        email: this.user.email,
        password: this.user.password
      );
    
  
;
</script>

这是错误消息显示它有两个错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'email' of undefined"

found in

---> <Login> at src/components/authentication/Login.vue
       <App> at src/App.vue
         <Root>
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?"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"19ca99f4-vue-loader-template"!./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&type=template&id=566f7c02&scoped=true& (app.js:1022), <anonymous>: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)

【问题讨论】：

哪一行出错error Cannot read property 'email' of undefinedconsole.log(payloadUserEmail);能得到正确的结果？

@TingsenCheng no 当我console.log(payloadUserEmail); 电子邮件显示在控制台中，但是当我添加提交功能时，此错误显示。

在添加commit function的同时，是否也添加let payloadUserEmail = user.user.email;？

@TingsenCheng 是的，即使我只是将user.user.email 传递给提交函数，它仍然会显示错误。

所以错误可能发生在user.user.email，你应该看到user的值并确保user和user.user是Object

【参考方案1】：

问题来了

  login( commit , context, payload) 

您只传递了一个参数，但在您放置的签名中 3. 将其更改为

  login( commit , payload) 

希望这会有所帮助！

【讨论】：

没有，当我删除提交并且只是console.log(payloadUserEmail); 它显示在控制台中，但是当我添加提交功能时，我得到了这个错误

请粘贴您在控制台中看到的内容。不可能它显示在控制台中，然后是未定义的。

我已经添加了错误和我的登录组件脚本

它在 v-on 上显示错误。也请添加登录组件的模板！

我已经添加了。