美文网首页
在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(/*......*/)
     }
    }
    
    

    相关文章

      网友评论

          本文标题:在vue项目中利用provide/inject注入服务

          本文链接:https://www.haomeiwen.com/subject/snbjdktx.html