使用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 {

    }
  })
}

現在，如何實際訪問用戶對象？ 當我從常規組件執行此操作時，它可以正常工作。 傳遞存儲簡單字符串也可以，但是其他任何操作都不行，是否需要某種承諾？ 謝謝。

Answer 1

從Vuex文檔中：

實際更改Vuex存儲中狀態的唯一方法是提交一個突變。 Vuex突變與事件非常相似：每個突變都有一個字符串類型和一個處理程序。 處理程序功能是我們執行實際狀態修改的地方（ 文檔鏈接 ）

突變還會觸發Vue中的DOM更新，因此通過提交突變，可更新反應性元素，而通過發送字符串直接操作狀態不會導致反應性更新 。 從Vuex文檔：

由於Vue使Vuex存儲的狀態具有反應性，因此當我們更改狀態時，觀察狀態的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'
  ])
}