반응형
Vuex 모듈 - ..mapGetters correvctly를 설정할 수 없습니다.
현재 내 스토어 구조를 다음과 같이 정의했습니다.
store
modules
User.js
index.js
스토어/모듈/User.js
import * as types from '@/store/mutation_types'
import firebase from 'firebase'
const state = {
...
user: JSON.parse(localStorage.getItem('user')) || null
}
const actions = {
setUser ({commit}, newUser) {
console.log('STORE ACTION setUser: ', newUser)
commit(types.SET_USER, newUser)
},
signUserIn ({commit}, payload) {
...
},
signUserUp ({commit}, payload) {
...
},
logout: context => {
...
}
}
const mutations = {
...
}
const getters = {
...
user: state => state.user
}
export const User = {
namespaced: true,
state,
actions,
mutations,
getters
}
store/index.displaces
/**
* Import Dependency
*/
import Vue from 'vue'
import Vuex from 'vuex'
import { firebaseMutations } from 'vuexfire'
import * as types from '@/store/mutation_types'
import { User } from '@/store/modules/User.js'
import { Account } from '@/store/modules/Account.js'
Vue.use(Vuex)
const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state: {
language: localStorage.getItem('language') || '',
...
},
actions: {
switchLanguage ({ commit }, context) {
commit(types.SET_LANGUAGE, context)
},
...
},
getters: {
language: state => state.language,
sideNav: state => state.sideNav,
showAssociation: state => state.showAssociation,
...
},
mutations: {
...
},
...firebaseMutations
},
modules: {
User,
Account
}
})
export default store
컴포넌트에서는 사용자 모듈 AND의 mapGetters를 사용해야 합니다.
...mapGetters('사용자', [사용자', [sideNav', 'show Association'),
하지만 이건 옳지 않아...에러가 표시된다.
Property or method "showAssociation" is not defined
mapGetters를 어떻게 써야 하나요?아니면 사용자 모듈에 문제가 있나요?
피드백 감사합니다.
서로 다른 모듈에서 getter를 가져와야 할 경우 개별적으로 매핑하면 됩니다.
computed: {
...mapGetters('User', ['user']),
...mapGetters(['showAssociation', 'sideNav'])
}
언급URL : https://stackoverflow.com/questions/51341724/vuex-modules-cannot-set-the-mapgetters-correvctly
반응형
'programing' 카테고리의 다른 글
Java 어레이 리플렉션: isArray vs. instance of (0) | 2022.08.28 |
---|---|
Django의 정적 파일 가져오기에는 Vue.js.vue 템플릿 내 작업이 포함됩니다. (0) | 2022.08.27 |
SDL2에서 텍스트를 렌더링하는 방법 (0) | 2022.08.27 |
VueJ: 라우터 뷰를 통해 루트 요소에서 자 컴포넌트로 데이터 전달 (0) | 2022.08.27 |
구문 오류:Vue js에 예기치 않은 토큰 }이(가) 있음 (0) | 2022.08.27 |