vuex의 여러 모듈에 대한 올바른 구문

vuex의 여러 모듈에 대한 올바른 구문

Vue와 Vuex beginer.vuex에서 여러 모듈로 하나의 스토어를 설정하려고 합니다.

폴더 구조는

store (folder)
  index.js
  modules (folder)
    hoodies.js
    shoes.js

나의index.js가지다

import Vue from 'vue'
import Vuex from 'vuex'
import hoodies from'./modules/hoodies';
import shoes from'./modules/shoes';

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        hoodies
        ,shoes
    }
})

안에서.hoodies.js그리고.shoes.js나는 같은 구조를 가지고 있는데, 다른 것은 "신발" 또는 "후디"라는 단어이다.

import axios from 'axios'

const state = {    
    shoes:[]
};

const getters = {
    allShoes : state => state.shoes    
};

const actions = { 
    async fetchShoes({commit}){ //.... 
}

const mutations = {
    setShoes:(state, shoes) => (state.shoes = shoes),
}

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

신발과 후드티를 같은 부품으로 사용하고 싶습니다.이것이 올바른 구문인지 알 수 없고 많은 튜토리얼에서 이 방법을 설명하지 않기 때문에 혼란스럽습니다.

그래서 그렇게 노력하고 있어요.

import { mapGetters, mapActions } from 'vuex'; 

methods:{
          ...mapActions('./store/modules/shoes', [ 'fetchShoes' ]),
          ...mapActions('./store/modules/hoodies', [ 'fetchHoodies' ]), 
          comboboxChange(){
            this.fetchHoodies();
          }
},
created(){
  this.fetchShoes(); 
}

콘솔에 에러는 표시되지 않는다.하지만 브라우저 콘솔에[vuex] module namespace not found in mapActions(): ./store/modules/shoes/

디버깅을 도와 주세요.간단한 해결이 도움이 됩니다.어떻게 해야 할지 모르겠어요.고마워요.

첫 번째 문제는 모듈을 "vessels"와 "charts"로 Import하기 때문에 모듈에 이름을 등록해야 한다는 것입니다.Import를 다음과 같이 변경할 것을 권장합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import hoodies from'./modules/hoodies';
import shoes from'./modules/shoes';

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        hoodies,
        shoes
    }
})

정확한 상태 값을 반환하는 데 getter가 필요하지 않습니다. 구성 요소에서 직접 상태에 도달할 수 있습니다.namesched 모듈을 사용하고 있기 때문에 다음과 같은 컴포넌트 상태 값을 얻을 수 있습니다.this.$store.state.shoes.shoes

상태의 계산된 값이 필요할 때 일반적으로 사용하는 Getter입니다.

언급URL : https://stackoverflow.com/questions/57322555/correct-syntax-for-multiple-modules-in-vuex