특정 방법으로 Vue.js Vuex 모듈 자동 등록

특정 방법으로 Vue.js Vuex 모듈 자동 등록

방금 Vue.js를 시작했는데 Vuex를 사용하려고 합니다.디렉토리 내에는 다음과 같은 구조가 있습니다.src/store/

store
├── index.js
└── modules
    ├── app
    │   └── index.js
    └── auth
        └── index.js

각 모듈에는 1개의 파일만 있습니다.index.js, 그 파일들 중에서getters, actions, mutations, etc각 모듈의.

질문은 다음과 같습니다.이 모든 모듈을 에 자동 등록하려면 어떻게 해야 합니까?src/store/index.js일일이 등록할 필요 없이 파일을 만들 수 있습니다.이 작업은 어플리케이션이 커짐에 따라 지루한 작업이 될 것입니다.또한 각 모듈이 자체 등록될 때 속성을 스스로 정의해야 합니다.namespaced: true

지금까지 시도한 내용:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const context = require.context('./modules', true, /index.js/); //only files with the name index.js

const modules = context.keys()
  .map(file => [file.replace(/(^.\/)|(\.js$)/g, ''), context(file)])
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true;
    }

    return { ...modules, [name]: module };
  }, {});

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

export default store;

잘 부탁드립니다.

내가 알기로는 문제는 모듈 매핑에 있습니다.context(file)디폴트 내보내기에서는 성공했습니다.context(file).default에 폴백합니다.context(file)정의되지 않은 경우.난 네가 옷을 벗는 것도 안 보여'/index'파일의 디렉토리 경로에서 파트를 선택합니다.

reduce를 사용하면 코드가 필요 이상으로 복잡해집니다.IMHO각 방법을 사용하면 쉽게 이 작업을 수행할 수 있습니다.

const context = require.context('./modules', true, /index.js/);
const modules = {};

context.keys().forEach((file) => {

  // create the module name from file
  const moduleName = file.replace(/(\.\/|\/index\.js$)/g, '');

  // register file context under module name
  modules[moduleName] = context(file).default || context(file);

  // override namespaced option
  modules[moduleName].namespaced = true;
});

const store = new Vuex.Store({
  modules, // ES6 shorthand for modules: modules
})

export default store;

언급URL : https://stackoverflow.com/questions/61093836/vue-js-auto-register-vuex-modules-in-a-specific-way