Vuex，firebase无法检索用户数据电话未定义

问题描述

我正在创建用户个人资料编辑页面。

现在，我想从我的Firebase实时数据库中检索用户名，电话号码和电子邮件地址。

我可以在输入字段中检索并显示用户名和电子邮件地址。我看不到电话号码。

我检查了vuex开发控制台，发现电话在vuex中未定义。

在数据库中，我可以正确插入所有数据。

我可以理解原因，但无法解决此问题。

这是我的store / index.js。

import Vue from 'vue'
import Vuex from 'vuex'
import fireApp from '@/plugins/firebase'
import admin from './admin'

Vue.use(Vuex)


export default new Vuex.Store({
  namespaced: true,state: {
    user: null,error: null,busy: false,jobDone: false
  },mutations: {
    // setCounter(state,payload) {
    //     state.counter = state.counter + payload
    // }
    setUser (state,payload) {
      state.user = payload
    },setError (state,payload) {
      state.error = payload
    },clearError (state,payload) {
        state.error = null
    },setBusy (state,payload) {
        state.busy = payload
    },setJobDone (state,payload) {
        state.jobDone = payload
    },},actions: {
    signUpUser({commit},payload) {
      commit('setBusy',true)
      commit('clearError')
      //1.Signup new user.
      //2.Update firebase user profile & set local user data.
      //3.Add user data into database
      //4.Attach user to consumer group
      let newUser = null
      
      fireApp.auth().createUserWithEmailAndPassword(payload.email,payload.password)
          .then(userCredential => {
            newUser = userCredential.user;
            var user = fireApp.auth().currentUser;
            
            return  user.updateProfile({
                displayName: payload.fullname,})
              .then(() => {
                
                const currentUser = {
                  id: user.uid,name: payload.fullname,phone: payload.phone,//phone: user.phone,email: payload.email,role: 'consumer'
              }
              commit('setUser',currentUser)
              commit('setBusy',false)
              })
          })
          .then(() => {
            return fireApp.database().ref('users/' + newUser.uid).set({
                name: payload.fullname,createdAt: new Date().toISOString()
            })
          })
          .then(() => {
            return fireApp.database().ref('groups').orderByChild('name').equalTo('Customer').once('value')
                  .then(snapshot => {
                      const groupKey = Object.keys(snapshot.val())[0]
                      let groupedUser = {}
                      groupedUser[newUser.uid] = payload.fullname
                      return fireApp.database().ref(`userGroups/${groupKey}`).update(groupedUser)
                  })
          })
          .then(() => {
              commit('setJobDone',true)
              commit('setBusy',false)
          })
          .catch(error => {
              commit('setBusy',false)
              commit('setError',error)
          })
      },loginUser({commit},true)
        commit('clearError')
        console.log('Login')
        commit('setJobDone',true)
        commit('setBusy',false)
    },true)
      commit('clearError')
      //1.login user
      //2.Find group user logins
      //3.set logged in user
      fireApp.auth().signInWithEmailAndPassword(payload.email,payload.password)
      .then(user => {
          const authUser = {
              id: user.uid,name: user.displayName,phone: user.phone,email: user.email
          }
          return fireApp.database().ref('groups').orderByChild('name').equalTo('Administrator').once('value')
          .then(snapshot => {
              const groupKey = Object.keys(snapshot.val())[0]
              return fireApp.database().ref(`userGroups/${groupKey}`).child(`${authUser.id}`).once('value')
              .then(ugroupSnap => {
                  if(ugroupSnap.exists()) {
                      authUser.role = 'admin'
                  } else {
                      authUser.role = 'customer'
                  }
                  commit('setUser',authUser)
                  commit('setBusy',false)
                  commit('setJobDone',true )
              })
          })
      })
      .catch(error => {
          commit('setBusy',false)
          commit('setError',error)
      })
  },logOut({commit}) {
    fireApp.auth().signOut()
    commit('setUser',null)
  },setAuthStatus({commit}) {
    fireApp.auth().onAuthStateChanged((user) => {
        if(user) {
            const authUser = {
                id: user.uid,email: user.email
            }
            fireApp.database().ref('groups').orderByChild('name').equalTo('Administrator').once('value')
            .then(snapshot => {
                const groupKey = Object.keys(snapshot.val())[0]
                fireApp.database().ref(`userGroups/${groupKey}`).child(`${authUser.id}`).once('value')
                .then(uGroupSnap => {
                    if(uGroupSnap.exists()) {
                        authUser.role = 'admin'
                    } else {
                        authUser.role = 'customer'
                    }
                    commit('setUser',authUser)
            })
        })
        }
    })
  },updateProfile ({commit,getters},true)
      commit('clearError')
      commit('setBusy',false)
      commit('setJobDone',true)
  }
     
},getters: {
    user (state) {
      return state.user
    },loginStatus (state) {
      return state.user !== null && state.user !== undefined
    },userRole (state) {
      const isLoggedIn = state.user !== null && state.user !== undefined
      return(isLoggedIn) ? state.user.role : 'customer'
    },error (state) {
      return state.error
    },busy (state) {
        return state.busy
    },jobDone (state) {
        return state.jobDone
    }
  },modules: {
    admin: admin
  }
})

CustomerProfile.vue

<template>
<div>
    <img src="../img/svg/Mangosteen.png" alt="">
    <Navbar />
    <form @submit.prevent="updateProfile">
    <b-card
    class="profile-card"
    >
    <div>
        <b-form>
            <p class="mt-3 text-center profile-title">Profile</p>
            <b-form-input
            id="input-1"
            v-model="fullname"
            type="text"
            required
            placeholder="fullname"
            class="mt-5 input"
            name="fullname" 
            v-validate="'required'" 
            :class="{ 'mt-5 input': errors.has('fullname') }">
            >
            </b-form-input>
            <p v-show="errors.has('fullname')" class="validate text-center">{{ errors.first('fullname') }}</p> 
            <b-form-input
            id="input-2"
            v-model.number="phone"
            type="tel"
            required
            placeholder="phone number"
            class="mt-5 input"
            name="phone number" 
            v-validate="'required'" 
            :class="{ 'mt-5 input': errors.has('phone number') }">
            >
            </b-form-input>
            <p v-show="errors.has('phone number')" class="validate text-center">{{ errors.first('phone number') }}</p>  
            <b-form-input
            id="input-3"
            v-model="email"
            type="email"
            required
            placeholder="Email"
            class="mt-5 input"
            name="email" 
            v-validate="'required|email'" 
            :class="{ 'mt-5 input': errors.has('email') }">
            >
            </b-form-input>
            <p v-show="errors.has('email')" class="validate text-center">{{ errors.first('email') }}</p>
            <error-bar :error="error"></error-bar> 
            </b-form>
        <b-button class="update-btn" type="submit">Update</b-button>
        </div>
    </b-card>
    </form>
</div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import ErrorBar from '@/components/ErrorBar'
import apiJobMixin from '@/mixins/apiJobMixin'
import fireApp from '@/plugins/firebase'
  
  export default {
    data () {
      return {
        fullname: '',phone: null,email: '',}
    },mixins: [apiJobMixin],components: {
      ErrorBar: ErrorBar
    },// created () {
    //   this.$store.commit('clearError')
    // //   const user = this.$store.getters.user
    // //   if (user) {
    // //     this.fullname = user.fullname
    // //     this.phone = user.phone
    // //     this.email = user.email
    // //   }
    // var user = fireApp.auth().currentUser;
    //     var name,email,phone;

    //     if (user != null) {
    //     name = user.displayName;
    //     email = user.email;
    //     phone = user.phone;
    //     }
    // },mounted: function () {
      this.$store.commit('clearError')
      const user = this.$store.getters.user
      if (user) {
        this.fullname = user.name
        this.phone = user.phone
        this.email = user.email
        
      }
    },methods: {
      updateProfile () {
        this.$validator.validateAll()
          .then(result => {
            if (result) {
              this.$store.dispatch('updateProfile',{ fullname: this.fullname,phone: this.phone,email: this.email })
            }
          })
      },jobsDone () {        
        this.$swal({
          title: 'Profile updated successfuly',icon: 'success'
        })
      }
    },// If data gone after page reload
    computed: {      
      userData () {
        return this.$store.getters.user
      }
    },watch: {      
      userData (value) {
        if (value) {
          this.fullname = value.name
          this.phone = value.phone
          this.email = value.email
        }
      }
    }
  }
</script>

我想知道为什么未定义电话对象。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）