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