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