require.context动态引入文件

最新推荐文章于 2023-04-05 15:52:14 发布

qingzhen568

最新推荐文章于 2023-04-05 15:52:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue实战 js 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43919509/article/details/121923339

vue实战同时被 2 个专栏收录

28 篇文章

订阅专栏

17 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中利用Webpack的require.context动态加载模块，并结合Vuex进行状态管理。通过在index.js文件中配置，将每个模块文件作为Vuex的子模块，并整合getters，实现了一个高效且可维护的Vue应用状态管理体系。

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

/**
 * 目录结构
 * store
 *   |--modules
 *      |--app.js
 *      |--user.js
 *   |--getters.js
 *   |--index.js
*/

index.js文件：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// 规则：https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // 获取文件名 './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store