Vue.js 以特定方式自动注册 Vuex 模块
Vue.js Auto register Vuex modules in a specific way
我刚开始使用 Vue.js,我正在尝试使用 Vuex。我的目录中有以下结构:src/store/
store
├── index.js
└── modules
├── app
│ └── index.js
└── auth
└── index.js
在每个模块中,我只有一个名为 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 会使代码变得比它需要的更复杂。您可以使用 forEach 方法轻松地做到这一点:
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;
我刚开始使用 Vue.js,我正在尝试使用 Vuex。我的目录中有以下结构:src/store/
store
├── index.js
└── modules
├── app
│ └── index.js
└── auth
└── index.js
在每个模块中,我只有一个名为 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 会使代码变得比它需要的更复杂。您可以使用 forEach 方法轻松地做到这一点:
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;