javascript - 无法读取未定义的属性“电子邮件”;firebase 身份验证();使用 Vuex
问题描述
我正在使用 vuex 来存储登录用户的电子邮件,但是当我尝试提交存储此电子邮件到状态对象的突变时,它会抛出 this 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)
解决方案
问题就在这里
login({ commit }, context, payload) {
您只传递了一个参数,但在您放置的签名中 3. 将其更改为
login({ commit }, payload) {
希望这可以帮助!
推荐阅读
- python - 来自子进程的 Python 酸洗
- regex - 删除vs代码段落中不必要的换行符
- javascript - Angular / Typescript - 无法更新订阅函数中的外部变量
- python - plt.scatter 覆盖分类数据框列
- html - Bootstrap 4: flex-row to bottom in card
- php - Symfony 5 (Bolt 4) 中的用户列表
- youtube-data-api - YouTube Data API v3:列出过去 24 小时内发布的频道的所有视频,忽略“占位符”
- postgresql - 了解 Postgres 中的继承;为什么插入/更新命令中的键“失败”
- git - 具有读取权限(本地/远程)的“git reset --hard”怎么样?
- php - Laravel Voyager 突变体