美文网首页
在vue项目中利用provide/inject注入服务

在vue项目中利用provide/inject注入服务

作者: videring | 来源:发表于2020-08-10 17:20 被阅读0次

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

相关文章