使用Nuxt.js中间件检查在firebase中登录的用户

Question

我为我的Nuxt应用程序构建了一些中间件。

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

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

    } else { 

    } 
    }) 
} 

现在，如何实际访问用户对象？当我从正常的组件这样做，它正常工作。传递存储简单的字符串也是可行的，但是其他任何操作都不行，是否需要某种承诺？ Thx寻求帮助。

Answer 1

从Vuex文件：

在Vuex店真正改变状态的唯一途径是通过提交 的突变。 Vuex突变与事件非常相似：每个突变 都有一个字符串类型和一个处理程序。处理函数是我们 执行实际状态修改 （Documentation link）

突变也触发Vue的DOM的更新，以便通过提交的突变，所述无功元件被更新，而通过发送直接操作状态一个字符串不会导致被动更新。从Vuex文档：

由于Vuex店内的状态是由Vue公司做出反应，当我们发生变异的状态，Vue公司的组件观察状态将自动更新，

题为“突变后续Vue公司的反应性的部分规则“对此有更详细的规定。

这里需要注意的是，突变仅适用于同步数据。 如果您有异步数据，Vuex操作将会有所帮助 - 他们可以执行变异并处理异步事件。

在没有进一步的示例代码的情况下，很难评估这里是否有其他问题，但是我已经包含了适用于此确切场景的示例存储文件。虽然没有nuxt特异性，原理是一样的：

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

然后你的模块中：

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