vuex引入多个模块简写方法

最新推荐文章于 2025-05-26 03:30:35 发布

weixin_33724659

最新推荐文章于 2025-05-26 03:30:35 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：https://juejin.im/post/5b962e1b5188255c930dc000

本文介绍了一种在Vue项目中使用Webpack的require.context方法自动导入Vuex模块的技术，避免手动导入模块导致遗漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Vuex对vue项目进行状态管理时，我们的Vuex主文件通常是这个样子的：

import Vue from 'vue'
import Vuex from 'vuex'
import A from './modules/a'
import B from './modules/b'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        A,
        B
    }
})
复制代码

随着项目变得越来越大，我们导入的文件就会越来越多，而且有时候在modules文件夹下添加了文件后，会忘了在主文件中添加进去；有没有自动导入的方法呢？

在webpack中，有提到一个方法require.context；可以使用此方法来创建自己的（模块）上下文，它接收三个参数：

要搜索的文件夹目录
是否还应该搜索它的子目录
以及一个匹配文件的正则表达式

例如：

require.context('./test', false, /\.test\.js$/)
// （创建了）一个包含了 test 文件夹（不包含子目录）
// 下面的、所有文件名以 `.test.js` 结尾的
// 能被 require 请求到的文件的上下文。
复制代码

详细请查看require.context的官方文档。

我们可以使用此方法来修改我们的代码；修改后如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let ms = require.context('./modules', false, /\.js$/)
let modules = {}
ms.keys().forEach(k => {
    let n = k.substring(2, k.length - 3)
    modules[n] = ms(k).default
})
export default new Vuex.Store({
    modules
})
复制代码

此时，在modules中添加的所有以.js后缀结尾的文件都会被自动导入进来了。