vuex无限级的模块，使用require.context实现多个嵌套下级模块自动导入

vuex提供module功能，如果模块很多，手工填写相当麻烦，还容易弄错，require.context()解决了此问题

创建一个modules.js文件

// 查找modules目录下的所有js文件
const files = require.context("./modules", false,  /\.js$/)
const modules = {}
// 将文件列表赋值给modules
files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default {
  modules
}

在store.js内这样导入

import modules from './modules'

Vue.use(vuex)

 return new vuex.Store({
      modules
  })

上面的操作实现了自动导入模块 但是，多级模块怎么办。 vuex是支持多级模块，上面的方法如果遍历所有的目录，key就不对，包含“/”分隔符。

modules:{
    child1:{
        
    },
    child2:{
        modules:{
            
        }
    }
    
}

下级模块无限制

下面就可以实现多级模块自动导入，但目录结构得像这样：

要实现多级目录的导入要用递归方法，修改modules.js const files = require.context("./modules", true, /.js$/)

/**
 * 读取模块
 * @param ks
 * @param value
 * @param modules
 * @param i
 * @param len
 * @returns {*|{}}
 */

export function getModule(ks,value,modules,i,len){
  modules = modules || {};
  if(i<len){
    if(i == len -1){
      // 最后一层，赋值
      modules[ks[len -1]] = value;
    }else{
      let m = {}
      // 在父级模块，是否存在对象
      if(modules[ ks[i]]&&modules[ ks[i]]['modules']){
        m = modules[ ks[i]]['modules'];
      }else if(modules[ ks[i]]){
        let pm = modules[ ks[i]];
        m = pm['modules'];
        pm['namespaced'] = true;
      }else{

        let pm = modules[ ks[i]] || {}
        modules[ ks[i]] = pm;
        pm['modules'] = m
        pm['namespaced'] = true;
      }

      i++

      getModule(ks,value,m,i,len)
    }
  }
  return modules;
}

files.keys().forEach(key => {
  let k = key.replace(/(\.\/|index\.js)/g, '').replace(/(\/)$/g,'');
  let ks = k.split('/');
  if(ks.length > 1){
    // 有子模块
    getModule(ks,files(key).default,modules,0,ks.length)
  }else{
    modules[k] = files(key).default
  }
})

日志输出modules，得到如下结果：

到此，就实现了无限制的多级模块导入。