在项目开发中,使用vuex,如果项目过大,vuex就需要模块化,但是如果module分的过多,我们就需要在
store
的index.js
中一个个引入,这样未免太麻烦,所以webpack出来了个配置,可以解决这个问题,无需多次引入,懒癌患者福音,以下是解决方案
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
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
配置了这个后就无需一个个引入模块了;详细配置可以看https://webpack.js.org/guides/dependency-management/#requirecontext