Vue.js＆Firebase'用戶'信息

我正在使用Vue.js和Firebase開發應用程序。Vue.js＆Firebase'用戶'信息

我已經設法使用電子郵件/密碼登錄，並且可以在state.currentUser下的Vue.js狀態下成功地存儲firebase.auth（）用戶信息。

但是，根據Firebase指南，我有更多信息存儲在'/ users'參考下。例如。/users/uid

我想把這個數據也放到vuex存儲中（state.userMeta），所以我可以在站點周圍使用它，但是它在刷新後永遠不會工作。如果我不刷新，註銷然後重新登錄，它會填充狀態。

任何幫助將大規模讚賞！

詹姆斯

auth.js

import { auth, db } from '@/config/database' 
import store from '@/vuex/store' 

const init = function init() { 
    auth.onAuthStateChanged((user) => { 
    if (user) { 
     store.dispatch('setUser', user) 
    } else { 
     // User is signed out. 
     store.dispatch('setUser', null) 
    } 
    }, (error) => { 
    console.log(error) 
    }) 
} 

export { init }

store.js

import Vue from 'vue' 
import Vuex from 'vuex' 
import createPersistedState from 'vuex-persistedstate' 
import { db } from '@/config/database' 

Vue.use(Vuex) 

const state = { 
    currentUser: null, 
    userMeta: null 
} 

const mutations = { 
    SET_USER (state, user) { 
    if (user) { 
     state.currentUser = user 
     db.ref('users/' + user.uid).on('value', function (s) { 
     state.userMeta = s.val() 
     }) 
    } else { 
     state.currentUser = null 
     state.userMeta = null 
    } 
    } 
} 

const actions = { 
    setUser ({commit}, user) { 
    commit('SET_USER', user) 
    } 
} 

const getters = { 
    currentUser: state => state.currentUser 
} 

export default new Vuex.Store({ 
    state, 
    mutations, 
    actions, 
    getters, 
    plugins: [createPersistedState()] 
})

在頁面刷新App.vue

<template> 
    <div id="app"> 
    <router-view></router-view> 
    </div> 
</template> 

<script> 
import * as auth from '@/config/auth' 

const initApp = function initApp() { 
    auth.init() 
} 

export default { 
    name: 'app', 
    created: initApp 
} 
</script> 

<style lang="scss" src="./assets/sass/style.scss"></style>

main.js

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import App from './App' 
import VueFire from 'vuefire' 
import router from './router' 

Vue.config.productionTip = false 
Vue.use(VueFire) 

import store from '@/vuex/store' 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    store, 
    template: '<App/>', 
    components: { App } 
})

來源

2017-03-16 James Clare

Vuex狀態被清除。

我整理了這一點，用這種方法

在main.js

new Vue({ 
el: '#app', 
router, 
store, 
created() { 
    Firebase.auth().onAuthStateChanged((user) => { 
      if (user) { 
       this.$store.state.user = this.$firebase.auth().currentUser 
      } else { 
       this.$store.state.user = null 
      } 
     }) 
    }, 
render: h => h(App) 
})

所以，當有一個刷新，你的狀態就會自動同步。

在你的組件

computed: { 
    user() { 
     return this.$store.state.user 
    } 
},

刷新後，欲以this.$firebase.auth().currentUser沒有不行的 - 而是通過驗證重新設置狀態改變，似乎這樣的伎倆

來源

2017-05-06 03:16:26 DogCoffee

Vue.js＆Firebase'用戶'信息

回答

相關問題