programing

Nuxt JS/Firebase를 사용한 Vuex 미지의 액션

goodsources 2022. 8. 31. 22:53
반응형

Nuxt JS/Firebase를 사용한 Vuex 미지의 액션

Nuxt JS 2.9.2와 Firebase 6에 인증 시스템을 구현하려고 합니다.Nuxt Fire 모듈과 Vuxfire 모듈을 사용하고 있습니다.

사용자를 작성, 로그인, 로그아웃할 수 있는 시스템을 정상적으로 셋업하고 데이터를 실시간 데이터베이스에 저장했습니다만, 실시간 데이터베이스에서 데이터를 취득하는 데 문제가 있습니다.

현재 로그인한 사용자를 기반으로 실시간 데이터베이스에서 정보를 꺼내려고 합니다. 예:

스토어/로컬 스토리지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는 다른 모듈파일에서 실행됩니다.

저장/인증.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)
    });
  }

알 수 없는 행동과 관련하여 제가 놓치고 있는 것은 무엇입니까?

장군

절대 돌연변이를 폭발시키지 말라고 충고하고 싶군요 돌연변이는 국소적인 상태만 바꿔놓기 위한 거예요또한 비동기일 수도 없습니다.

접속할 수 없습니다. dispatch어쨌든 돌연변이를 일으키죠상태 및 payload를 파라미터로만 얻을 수 있습니다.

자세한 내용은 공식 vuex 설명서를 참조하십시오.

문제 해결 방법:

setUser()라는 액션을 만듭니다.이 액션에서는 다음과 같이 디스패치에 액세스 할 수 있습니다.

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
  }

}

도움이 됐으면 좋겠네요

언급URL : https://stackoverflow.com/questions/57873104/vuex-unkown-action-with-nuxt-js-firebase

반응형