vuex無限級的模塊，使用require.context實現多個嵌套下級模塊自動導入

時間 2019-11-22

標籤 vuex 無限模塊使用 require.context require context 實現多個嵌套下級自動導入简体版

原文原文鏈接

vuex提供module功能，若是模塊不少，手工填寫至關麻煩，還容易弄錯，require.context()解決了此問題vue

建立一個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就不對，包含「/」分隔符。vuex

modules:{
    child1:{
        
    },
    child2:{
        modules:{
            
        }
    }
    
}
複製代碼

下級模塊無限制

下面就能夠實現多級模塊自動導入，但目錄結構得像這樣：bash

要實現多級目錄的導入要用遞歸方法，修改modules.js const files = require.context("./modules", true, /.js$/)ui

/**
 * 讀取模塊
 * @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
  }
})
複製代碼