Überprüfen Sie den angemeldeten Benutzer in Firebase mit Nuxt.js Middleware

Question

Ich habe Middleware für meine Nuxt-App gebaut.

import api from '~/api/Api.js' 

export default function ({router, store}) { 
    return api.auth().onAuthStateChanged(function (user) { 
    store.state.user = user 
    if (user) { 

    } else { 

    } 
    }) 
} 

Nun, wie bekomme ich tatsächlich Zugriff auf das Benutzerobjekt? Wenn ich das von der normalen Komponente mache, funktioniert es richtig. Passing to store simple string funktioniert auch, aber jede andere Aktion nein, gibt es irgendeine Art von Versprechen? Danke für Hilfe.

Answer 1

Aus den Vuex Dokumente:

Der einzige Weg ist eine Mutation, indem sie sich verpflichten tatsächlich Zustand in einem Vuex Speicher zu ändern. Vuex-Mutationen sind Ereignissen sehr ähnlich: Jede Mutation hat einen String-Typ und einen Handler. Die Handler-Funktion ist, wo wir Istzustand Modifikationen durchführen (Documentation link)

Mutations triggern auch die DOM-Update in Vue, so dass eine Mutation durch Begehen werden die reaktiven Elemente aktualisiert, während direkt Zustand Manipulation durch Senden Eine Zeichenfolge führt nicht zum reaktiven Update. Aus dem Vuex docs:

Da ein Staat Vuex Ladens von Vue reaktiver gemacht wird, wenn wir den Zustand mutieren, beobachten Vue Komponenten, die den Zustand werden automatisch aktualisiert

Den Abschnitt mit dem Titel „Mutations Folgen Vues Reaktivität Regeln "hat eine detailliertere Herabsetzung zu diesem Thema.

Der Vorbehalt hier ist, dass Mutationen nur für synchrone Daten funktionieren. Wenn Sie asynchrone Daten haben, sind Vuex-Aktionen hilfreich - sie können eine Mutation durchführen und asynchrone Ereignisse verarbeiten.

In Ermangelung weiterer Beispielcode ist es schwierig zu beurteilen, ob es andere Probleme gibt, aber ich habe eine Beispielspeicherdatei eingefügt, die für dieses genaue Szenario funktioniert. Auch wenn es nicht spezifische nuxt, ist das Prinzip das gleiche:

// store.js 

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

const state = { 
    user: {}, 
    files: [], 
    token: '' 
} 

const mutations = { 
    logOut (state) { 
    state.user = null 
    }, 
    setUser (state, user) { 
    state.user = user 
    }, 
    setToken (state, token) { 
    state.token = token 
    } 
} 

const actions = { 
    logOut: ({ commit }) => commit('logOut'), 
    setUser: ({ commit }, user) => commit('setUser', user), 
    setToken: ({ commit }, token) => commit('setToken', token) 
} 

const getters = { 
    user: state => state.user, 
    token: state => state.token, 
    files: state => state.files 
} 

export default new Vuex.Store({ 
    state, 
    getters, 
    actions, 
    mutations 
}) 

Dann in Ihrem Modul:

import store from '@/store' 
import { mapGetters } from 'vuex' 

api.auth().onAuthStateChanged(function (user) { 
    store.dispatch('setUser', user) // .dispatch triggers ACTION, handling async evt 
    if (user) { 

    } else { 

    } 
}) 


export default { 
    // mapGetters maps getters allowing this.user in script, or {{ user }} in template 
    computed: mapGetters([ 
    'user', 
    'files' 
    ]) 
}