使用Firebase realtime和Vue.js与Vuex构建具有身份验证和用户配置文件的基本应用程序。当我试图通过Vuex商店通过ID检索用户详细信息时，我收到了一个令人讨厌的错误"fb.db.ref(…(.then不是函数"。
firebaseConfig.js
import firebase from 'firebase'
// firebase init goes here
var firebaseConfig = {
apiKey: "******",
authDomain: "******",
databaseURL: "******",
projectId: "******",
storageBucket: "******",
messagingSenderId: "******",
appId: "******"
};
firebase.initializeApp(firebaseConfig);
// firebase utils
const db = firebase.database()
const auth = firebase.auth()
console.log('inside config - auth:', auth)
console.log('inside config db:', db)
const currentUser = auth.currentUser
export {
db,
auth,
currentUser,
}注册功能(身份验证和将用户写入数据库工作正常(
signup() {
this.performingRequest = true
// first we authorize(separate to user object)
fb.auth.createUserWithEmailAndPassword(this.signupForm.email, this.signupForm.password).then(credential => {
// we send the user to vuex to set
this.$store.commit('setCurrentUser', credential.user)
// create user obj in firebase collection
fb.db.ref(`users/${credential.user.uid}`).set({
name: this.signupForm.name,
email: this.signupForm.email
}).then(() => {
this.$store.dispatch('fetchUserProfile')
this.performingRequest = false
this.$router.push('/dashboard')
}).catch(err => {
console.log('signup() - creating fb user object', err)
this.performingRequest = false
this.errorMsg = err.message
})
}).catch(err => {
console.log('signup() - creating fb auth object', err)
this.performingRequest = false
this.errorMsg = err.message
})
},存储(我得到错误的地方(
import Vue from 'vue'
import Vuex from 'vuex'
const fb = require('../firebaseConfig.js')
Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentUser: null,
userProfile: {}
},
mutations: {
setCurrentUser(state, val) {
state.currentUser = val
},
setUserProfile(state, val) {
state.userProfile = val
}
},
actions: {
fetchUserProfile({ commit, state }) {
fb.db.ref(`users/${state.currentUser.uid}`).then(res => { //ERROR FROM THIS LINE
commit('setUserProfile', res.data())
}).catch(err => {
console.log(err)
})
}
},
modules: {
}
})Index.html和代码段(尽管不确定我是否需要(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/__/firebase/7.13.2/firebase.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>非常感谢任何提示！！谢谢
如果要读取数据，则需要使用once():
actions: {
fetchUserProfile({ commit, state }) {
fb.db.ref(`users/${state.currentUser.uid}`).once('value').then(res => {
commit('setUserProfile', res.val())
}).catch(err => {
console.log(err)
})
}
},
查看此处了解更多信息：
https://firebase.google.com/docs/database/web/read-and-write#read_data_once