Vuex 모듈에서 mapGetters를 사용하는 방법

Vuex 모듈에서 mapGetters를 사용하는 방법

에 모듈을 추가했습니다.store/index.js

import NavMessage from './nav/message/index';
new Vuex.Store({
  modules: {
    NavMessage,
  },
});

my message/index.displaces

import state from './state';
import getters from './getters';
import mutations from './mutations';

export default {
  state,
  getters,
  mutations,
};

여기 게터들이 있다

const getters = () => ({
  getCount: state => {
    return state.count;
  },
});

export default getters;

데이터 수집을 시도하고 있습니다.NavMessage/getCount

...mapGetters({
    count: 'NavMessage/getCount',
  }),

에러가 납니다.unknown getter: NavMessage/getCount

고맙다는 말 좀 해줘

다음은 작업 예를 제시하겠습니다.

두 가지 중요한 변경을 가했습니다.

1. 추가했습니다.namespaced: true모듈로 이동합니다.
2. 랩퍼 기능을 제거했습니다.getters.

네임스페이스를 사용하지 않을 경우,mapGetters에 대한 의론.count: 'getCount'대신.그NavMessage/prefix는 네임스페이스에서만 필요합니다.

const mapGetters = Vuex.mapGetters

const state = {
  count: 6
}

const getters = {
  getCount: state => {
    return state.count
  }
}

const mutations = {}

const NavMessage = {
  namespaced: true,
  state,
  getters,
  mutations
}

const store = new Vuex.Store({
  modules: {
    NavMessage
  }
})

const app = new Vue({
  store,

  computed: {
    ...mapGetters({
      count: 'NavMessage/getCount',
    })
  }
})

console.log(app.count)

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

당신은 Nuxt의 질문에 태그를 달았습니다.Nuxt를 사용하고 있다면 스토어 사용 가이드를 읽을 것을 강력히 권장합니다.

https://nuxtjs.org/guide/vuex-store

Nuxt는 조금 다르게 일을 처리하지만 내가 아는 한 여전히 기능 래퍼를 사용해서는 안 됩니다.getters.그namespaced: true자동으로 추가되기 때문에 작성은 작성하지 않아도 됩니다.new Vuex.Store네 자신.Nuxt는 스토어를 직접 만들고 폴더 구조에 따라 모듈을 추가합니다.

언급URL : https://stackoverflow.com/questions/59277092/how-to-use-mapgetters-with-vuex-modules