Nuxt JS / Firebase 的 Vuex 未知操作

Question

我正在尝试在 Nuxt JS 2.9.2 和 Firebase 6 中实现身份验证系统。我正在使用 Nuxt Fire 模块和 Vuexfire 模块。

我已经成功设置了可以创建、登录和注销用户并将一些数据保存到实时数据库的系统，但是，我在尝试从实时数据库中检索数据时遇到了一些麻烦数据库。

我正在尝试根据当前登录的用户从我的实时数据库中提取信息，例如：

商店/本地Storage.js

import firebase from 'firebase'
import { firebaseAction } from 'vuexfire'

export const state = () => ({
  user: null,
  account: null
})

export const actions = {

  setAccountRef: firebaseAction(({ bindFirebaseRef }, path) => {
    return bindFirebaseRef('account', firebase.database().ref(path))
  })

}

export const mutations = {

  /*
   * Set user information
   */
  setUser (state, payload) {
    state.user = payload
    return this.dispatch('setAccountRef', `accounts/${state.user.uid}`)
  }

}

不幸的是，我的设置似乎给了我一个： [vuex] unknown action type: setAccountRef错误。

为了您的信息， setUser是从另一个模块文件运行的：

商店/authentication.js

createUser ({commit}, payload) {
    this.$fireAuth.createUserWithEmailAndPassword(payload.email, payload.password).then(function({user}) {
      commit('localStorage/setUser', { email: payload.email, uid: user.uid }, { root: true })
      createNewAccount(user)
      $nuxt.$router.push({ path: '/', query: {
        alertActive: true,
        type: 'info',
        message: 'Your account has been successfully created'
      }})
    }).catch(function(error) {
      console.log('error registering' + error)
    });
  }

就未知操作而言，我缺少什么？

Answer 1

一般的

我建议你永远不要破坏你的突变，突变意味着只更新本地状态。 它们也不能是异步的。

无论如何，您无法在突变中访问dispatch 。 您只能获取状态和有效负载作为参数。

在官方 vuex 文档中阅读更多内容。

您的问题的解决方案：

创建一个名为 setUser() 的操作，在那里您可以像这样访问 dispatch：

export const actions = {

  setAccountRef: firebaseAction(({ bindFirebaseRef }, path) => {
    return bindFirebaseRef('account', firebase.database().ref(path))
  }),

  setUser: ({commit, dispatch}, payload) => {
    commit('SET_USER', payload)
    return dispatch('setAccountRef', `accounts/${payload.uid}`)
  })

}

export const mutations = {

  /*
   * Set user information
   */
  SET_USER: (state, payload) => {
    state.user = payload
  }

}

希望有所帮助。