programing

Vuex 모듈 - ..mapGetters correvctly를 설정할 수 없습니다.

bestcode 2022. 8. 27. 09:37
반응형

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

반응형