반응형
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를 파라미터로만 얻을 수 있습니다.
문제 해결 방법:
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
반응형
'programing' 카테고리의 다른 글
InputStream에서 File 객체를 생성할 수 있습니까? (0) | 2022.09.01 |
---|---|
C의 파일 설명자에서 파일 이름 검색 (0) | 2022.09.01 |
vue jsx에서 템플릿 범위를 사용하는 방법 (0) | 2022.08.31 |
$store가 정의되지 않은 이유는 무엇입니까? (0) | 2022.08.31 |
페이지 로드 시 돌연변이 [Nuxt] [Vuex] (0) | 2022.08.31 |