Vue.js＆Firebase 'User' info

Question

私は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 } 
}) 

Answer 1

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) 
}) 

では、この方法

を使用して、これを整理しました。動作しませんしませthis.$firebase.auth().currentUserを使用しようとしてリフレッシュした後

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

あなたのコンポーネントで

、 - しかし、認証を経て、再び状態を設定が変更さは、トリックを行うようだ