构建项目中合理利用require.context进行优化

自定义组件批量全局加载

也是常见的可以使用该方法的地方

1
2
3
4
5
6
7
8
9
import Vue from 'vue'

// arg1: 自定义组件所在的路径 arg2: 是否遍历路径下中的子文件夹, arg3: 匹配的正则
const requireComponents = require.context('../components/AppBase', true, /\.vue|js/)
requireComponents.keys().forEach(fileName => {
const reqCom = requireComponents(fileName)
const reqComName = reqCom.default.name // 使用组件中 name属性做为全局的组件名进行注册
Vue.component(reqComName, reqCom.default || reqCom)
})

vuex中当store分module之后的加载

一般情况下结构是

1
2
3
4
5
6
|-- store
|--modules
- app.js
- user.js
- xxx.js
|--index.js

那么在index.js中导入是这样

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store {
modules: {
app,
user
}
}

如果使用require.context

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const requireStore = require.context('./modules/', false, /[a-z]\w+\.(js)$/)
/*
store = {
app,
user,
xxx
}
*/
const modules = requireStore.keys().reduce((p, n) => {
// 获取store的名字
const name = n.replace(/\.\//, '').replace(/\.js/, '')
const store = {}
store[name] = requireStore(n).default
return { ...p, ...store }
}, {})

export default new Vuex.Store({
modules
})

这种引入的方式,推荐开启Vuex的命名空间(namespace: true),另外需要注意的是

  1. 强烈建议使用mapSates, mapActions这种方使来调用。因为开了命名空间。
    所以可以指定加载某个store.
    eg:
    1
    2
    import { createNamespacedHelpers } from 'vuex'
    const { mapState, mapMutations, mapActions } = createNamespacedHelpers('app') // 参数为require.context加载时候的name
  2. 还有一个点需要注意的是在创建vue实例是,即在main.js中new Vue的时候要加载一个启动项,而这个启动项需要调用到store的时候
    是需要处理下的。
    代码

main.js

1
2
3
4
5
6
7
import bootstrap from './utils/bootstrap'
new Vue({
router,
store,
created: bootstrap,
render: h => h(App)
}).$mount('#app')

bootstrap.js

比如我在此时初始化路由

1
2
3
4
5
6
7
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('app')

export default function initApp () {
const { setMenusList } = mapActions(['setMenusList'])
setMenusList.call(this, []).then(r => {}).catch(e => {})
}

在这里面store中app.js里的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import routes from '../../router/routes'
import { APP_BASE_ROUTE } from '../../config'
import { getMenuList } from '../../utils/utils'
import Vue from 'vue'

export default {
namespaced: true,
state: {
currentMenu: APP_BASE_ROUTE, // 当前顶级菜单
subMenuList: [],
collapsed: false,
menuList: [],
dataMap: null
},
getters: {
dataMap: state => {
return state.dataMap ? state.dataMap : Vue.ls.get('DATA_MAP')
}
},
mutations: {
SET_DATA_MAP: (state, map) => {
state.dataMap = map
Vue.ls.set('DATA_MAP', map)
},
TOGGLE_COLLAPSED: state => {
state.collapsed = !state.collapsed
},
SET_MENU_LIST: (state, menuList) => {
state.menuList = menuList
},
SET_SUB_MENUS: (state, menu) => {
const { menuList } = state
const subMenu = menuList.find(it => it.name === menu.name)
const { children } = subMenu
state.subMenuList = children
},
SET_APP_BREADCRUMB: (state, menu) => {
// console.log(menu)
}
},
actions: {
setMenusList: ({ state, commit }, backendMenuList) => {
commit('SET_MENU_LIST', getMenuList(routes, backendMenuList))
commit('SET_SUB_MENUS', { name: state.currentMenu })
commit('SET_APP_BREADCRUMB', { name: state.currentMenu })
},
async loadSystemMaps ({ commit }) {
const response = await Vue.$http.app.getLanguage()
const { data } = response
commit('SET_DATA_MAP', data)
}
}
}

api请求模块

  1. 在项目较大时,可能会有多个模块有多个请求,同理也可以使用require.context来处理

http/modules/test.js

1
2
3
4
5
6
7
8
import axios from 'axios'
export const getTableList = data => {
return axios.request({
url: '/xxx/xx',
data,
method: 'POST'
})
}

http/index.js

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
const requireHttpModule = require.context('./modules', false, /\.js/)

const modules = requireHttpModule.keys().reduce((p, n) => {
const name = n.replace(/\.\//, '').replace(/\.js/, '')
const store = {}
store[name] = requireHttpModule(n)
return { ...p, ...store }
}, {})
export default modules

src/main.js

这里可以抽成Vue Plugin的插件的形式。这里简单处理,直接绑定在原型上了

1
2
3
4
import Vue from 'vue'
import http from './http'

Vue.prototype.$http = http

那么在调用的时候可以使用

1
2
3
4
5
6
7
methods: {
async getTableList () {
// 调用方式就是 this.$http[模块名][api方法名]
const response = await this.$http.test.getTableList()
console.log(response)
}
}

—- end