네임슬레이드 모듈의 mapState 및 mapMutations 사용

네임슬레이드 모듈의 mapState 및 mapMutations 사용

vuex 저장소를 3개의 모듈로 분할한 후 돌연변이와 상태에 액세스하는 방법을 알 수 없습니다.여러 가지 구문을 시도해 봤는데 어떻게 해야 할지 모르겠어요.

지도 상태:mapStates, vendor 및 root는 모듈 이름입니다.

...mapState({
  vendor: state => state.vendor.vendor,
  language: state => state.root.language
})

다음과 같이 사용합니다.

console.log(this.vendor);

맵 변환:mapMutations를 올바르게 설정한 것 같습니다.

methods: {
  ...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}

다음과 같이 액세스합니다.

this.$store.commit('UPDATE_VENDOR', response.data);

또는

this.UPDATE_VENDOR(response.data);

이것들 중 어느 것도 나에게 효과가 없는 것 같고 나는 내가 무엇을 잘못하고 있는지 이해할 수 없다.

저희 가게는 다음과 같습니다.

import vendorModule from './vendor/vendorModule';

const store = new Vuex.Store({
  modules: {
    customer: customerModule,
    root: rootModule,
    vendor: vendorModule
  }
});

다음과 같은 모듈을 사용합니다.

const vendorModule = {
  namespaced: true,
  state: () => ({
    vendor: null,
    vendorApiState: ENUM.INIT
  }),
  mutations: {
    UPDATE_VENDOR(state, vendor) {
      state.vendor = vendor;
      state.vendorApiState = ENUM.LOADED;
    }
  }
};

export default {
  vendorModule
};

편집 저는 제 모듈이 잘못된 구조로 되어 있다는 것을 깨달았습니다.그리고 켈빈 오메레손이 쓴 것처럼 저는 여기서 잘못된 구문을 사용했습니다.this.$store.commit('vendor/UPDATE_VENDOR', response.data);.

동작하는 모듈 구조는 다음과 같습니다.

const state = () => ({
  vendor: null,
  vendorApiState: ENUM.INIT
});

const mutations = {
  UPDATE_VENDOR(state, vendor) {
    state.vendor = vendor;
    state.vendorApiState = ENUM.LOADED;
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

사용하고 싶은 경우this.$store.commit('UPDATE_VENDOR', response.data);. 필요 없다mapMutations. 이렇게 사용합니다.

this.$store.commit('vendor/UPDATE_VENDOR', response.data);

주의: 모듈 이름은 슬래시로 구분된 변환 이름 앞에 있습니다./

언급URL : https://stackoverflow.com/questions/62403944/using-mapstate-and-mapmutations-from-a-namespaced-module