在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(/*......*/)
 }
}

上一篇下一篇

猜你喜欢

热点阅读