在vue项目中利用provide/inject注入服务
2020-08-10 本文已影响0人
videring
在main.js中通过require.context
获取services目录下所有以Service.js结尾的文件:
services目录结构:
services
- AService.js
- BService.js
// main.js
const servicesDir = require.context('./services', false, /Service\.js$/)
const services = {}
servicesDir.keys().forEach(filename => {
const moduleName = filename.replace(/\.\/|\.js/g, '')
services[moduleName] = {
...servicesDir(filename).default
}
})
new Vue({
el: '#app',
router,
provide: services, // 关键
store,
components: { App },
template: '<App/>',
created() {}
})
// 使用服务的地方
export default {
name: '**',
inject: ['BService'], // 关键
created() {
this.BService.getModels().then(/*......*/)
}
}