Vuex 操作无法正常工作。显示错误“signInWithEmailAndPassword 失败：第一个参数“email”必须是有效字符串”

Posted 2023-02-22

【中文标题】Vuex 操作无法正常工作。显示错误“signInWithEmailAndPassword 失败：第一个参数“email”必须是有效字符串”

【英文标题】：Vuex actions not working properly. Shows an error "signInWithEmailAndPassword failed: First argument "email" must be a valid string"

【发布时间】：2019-11-03 00:14:03

【问题描述】：

我是 Vuejs 状态管理的新手。我尝试使用 Vuex 使用 Firebase 制作登录系统。但收到此错误。

signInWithEmailAndPassword 失败：第一个参数“email”必须是有效字符串

不明白问题出在哪里。

<pre>
//  store/auth.js

export const actions = 
    loginUser(payload)
        firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
        .then(user =>            
            console.log(user);
        )
        .catch(error => 
            console.log(error);            
        ) 
    



// Login.vue

export default 
    data()
      return
        email:'',
        password:''
      
    ,
    methods:
      login()
        this.$store.dispatch('auth/loginUser', email:this.email, password:this.password)
      
    

</pre>   

// 表格

<v-flex xs12>
                  <v-text-field
                    v-model="email"                           
                    name="email"
                    label="Email"
                    type="email"
                    required></v-text-field>
                </v-flex>
              </v-layout>

              <v-layout row>
                <v-flex xs12>
                  <v-text-field
                    v-model="password"                               
                    name="password"
                    label="Password"
                    type="password"
                    required></v-text-field>
                </v-flex>
              </v-layout>

【问题讨论】：

this.email 和payload.email 的值是多少？你能检查它们是否正确吗？

我更新了我的代码，以便您可以检查“this.email”的值所在的表单数据

谢谢。我知道电子邮件值很可能来自您组件中的一个字段。我更想在login 方法和vuex 商店的loginUser 操作中检查它的值within。你可以简单地使用console.log(this.email) 和console.log(payload.email)，或者更好的是使用vue-devtools 扩展（github.com/vuejs/vue-devtools）

当我 console.log(this.email) 进入登录方法时。一切正常。此外，当我将正确的登录值传递给诸如 firebase.auth().signInWithEmailAndPassword("[e-mail], "123456") 之类的操作时，效果很好。只有在我调度时才会出现问题。“ this.$store.dispatch ('auth/loginUser', email:this.email, password:this.password) "

【参考方案1】：

您以错误的方式将 payload 传递给操作。

你应该这样做：

loginUser(context, payload) => 
   //...

查看文档：https://vuex.vuejs.org/guide/actions.html