$fireDb 在 Nuxt Fire / Firebase Vuex 中未定义

Question

我正在使用 Nuxt JS 2.9.2 来构建一个 Javascript 应用程序。 它具有通过 Nuxt Fire 模块进行的 Firebase 集成，以及用于处理状态管理和身份验证的 Vuex。

我已经设置了项目，并且能够创建用户、登录和注销。

我现在正在尝试在 Firebase 中设置一些数据以及用户 ID，并且收到$fireDb未定义错误，即使用户仍在创建中（没有设置任何信息）：

function createNewAccount (user) {
  const databaseRef = this.$fireDb.ref(`accounts/${user.uid}`)
  return databaseRef.set({
    displayName: 'Test Display Name', // use part of the email as a username
    email: 'My Test Email',
    image: 'Some Image' // supply a default profile image for all users
  })
}

export const actions = {

  /*
   * Create a user
   */
  createUser ({commit}, payload) {
    this.$fireAuth.createUserWithEmailAndPassword(payload.email, payload.password).then(function({user}) {
      commit('localStorage/setUser', { email: payload.email }, { root: true })
      createNewAccount(user)
    }).catch(function(error) {
      console.log('error registering' + error)
    });
  }
}

我想弄清楚为什么this.$fireDb是未定义的？ 我试过遵循文档，但这部分似乎坏了？

https://github.com/lupas/nuxt-fire#usage

Answer 1

您尝试访问。这店外的createNewAccount（）函数。

您可以访问商店中的 this.$fireDb、您的 .vue 文件和 nuxt 插件，但不会自动超出该范围。

因此，您可以例如将函数移动到 store 操作中，如下所示：

export const actions = {
  /*
   * Create a user
   */
  createUser({ commit, dispatch }, payload) {
    this.$fireAuth
      .createUserWithEmailAndPassword(payload.email, payload.password)
      .then(function({ user }) {
        commit('localStorage/setUser', { email: payload.email }, { root: true })
        dispatch('createNewAccount', true) // CHANGED THIS
      })
      .catch(function(error) {
        console.log('error registering' + error)
      })
  },

  createNewAccount({ commit }, user) {
    const databaseRef = this.$fireDb.ref(`accounts/${user.uid}`)
    return databaseRef.set({
      displayName: 'Test Display Name', // use part of the email as a username
      email: 'My Test Email',
      image: 'Some Image' // supply a default profile image for all users
    })
  }
}

或者在您的应用程序中的任何其他地方运行，您可以通过 .this 访问 nuxt 上下文。

希望有帮助:)