How to get data from firebase without reloading the page?

Question

firebase

I'm trying to do registration / authorization on vue + vuetify.

Vuex is connected.

There is authorization / registration on firebase (Realtime Database) through the form from the page (data is entered into the database).

There are 3 files in the store folder:

1) index.js

export default new Vuex.Store({
  state: {
    error: null
  },
  mutations: {
    setError(state, error) {
      state.error = error
    },
    clearError(state) {
      state.error = null
    },

  },
  getters: {
    error: s => s.error
  },
  modules: {
    auth,
    info
  }
})

2) auth.js

actions: {
       async login({dispatch, commit}, {email, password}) {
           try {
            await firebase.auth().signInWithEmailAndPassword(email, password)
           } catch (e) {
            commit('setError', e)
            throw e
           }
       },

        getUid() {
            const user = firebase.auth().currentUser
            return user ? user.uid : null
        },

}

3) info.js

state: {
        info: {}
    },

    mutations: {
        setInfo(state, info) {
            state.info = info
        },
        clearInfo(state) {
            state.info = {}
        }
    },

    actions: {
        async fetchInfo({dispatch, commit}) {
            try {
                const uid = await dispatch('getUid')
                const info = (await firebase.database().ref(`/users/${uid}/info`).once('value')).val()
                commit('setInfo', info)
              } catch (e) {
        
              }
        }
    },
    getters: {
        info: s => s.info
}

In the views folder in the Login.vue file

<v-form
    ref="form"
  @submit.prevent="submitAuth">
...

methods: {
    async submitAuth() {
    const formData = {
      email: this.email,
      password: this.password
    }
    try {
      await this.$store.dispatch('login', formData)
    this.$router.push('/')
    } catch (e) {}
    },
},

Now I want to display the (name) of the logged in user, I specify {{name}} in the right place.

computed: {
  name() {
    return this.$store.getters.info.name
  }
},

When I enter existing data into the login form - everything is OK, it enters, but (name) is not displayed - as soon as I reload the page (name) appears and then when I go through the routes all the rules.

Is it possible in my case to get the data without reloading?
If possible, please explain clearly what is wrong?

Answer 1

And if you add after the line?
await this.$store.dispatch('login', formData)
await this.$store.dispatch('fetchInfo')