乐趣区

关于javascript:store中需要引入很多modulesjs-可以使用requirecontext

require.context()

require.context() MDN

require.context(directory, useSubdirectories, regExp)
// 例子
require.context('./test', false, /\.test\.js$/);
//(创立出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。
directory:要搜寻的目录
是否搜寻其子目录
匹配文件的正则表达式

一个 context module 会导出一个(require)函数,此函数能够接管一个参数:request。此导出函数有三个属性:resolve, keys, id

  • resolve 是一个函数,返回 request 被解析后失去的模块 id
  • keys 也是一个函数,返回一个数组,由所有可能彼此 context module 解决的申请组成;
  • idcontext module 外面所蕴含的模块 id. 它可能在你应用 module.hot.accept 时会用到。

例子:引入一个文件夹上面的所有 js 文件

function importAll (r) {r.keys().forEach(r);
}
importAll(require.context('../components/', true, '/\.js$/'));
var cache = {};

function importAll (r) {r.keys().forEach(key => cache[key] = r(key));
}

importAll(require.context('../components/', true, /\.js$/));
// 在构建时 (build-time),所有被 require 的模块都会被填充到 cache 对象中。

原:store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import permission from './modules/permission'
import user from './modules/user'
import tagsView from './modules/tagsView'
import roleManage from './modules/roleManage'
import userManage from './modules/userManage'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    permission,
    user,
    tagsView,
    roleManage,
    userManage
  },
  getters,
  strict: false
})

export default store

改:能够应用 require.context

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

const modulesFiles = require.context('./modules', false, /\.js$/)

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

Vue.use(Vuex)

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

export default store
退出移动版