Блог

Я разработал плагин для централизации HTTP-вызовов, и мне нужно получить доступ к его функции ( $ap i) из импортированного модуля в компоненте. Следующее работает нормально: плагин (http-transport.js )

 export default {
    install: function (Vue) { ...
    Vue.prototype.$api = (...)
  

main.js

 import HTTPTransport from './http-transport/http-transport'
Vue.use (HTTPTransport);
  

Использование из любого component.vue

  methods: {
    someMethod() {
       this.$api(...)
}}
  

Все вышеперечисленное работает.

Теперь у меня есть компонент SFC, который импортирует модуль component.vue

 import logic from "./LogicService.js";
  

Вопрос: как я могу вызвать $api из функции внутри LogicService.js ?

Реальный случай заключается в том, что LogicService.js импорт DataService.js из которого мне нужно вызвать функцию $ api, но я предполагаю, что решение вопроса решает и это. Большое спасибо! (vue 2.6.11)

есть несколько способов сделать это. самый простой способ — просто импортировать vue и вызвать функцию. но в этом случае вы должны добавить функцию плагина как глобальную в vue

например. в http-transport.js

 export default function (Vue) {
  //add global method or property
  Vue.api= function () {
    // some logic ...
    api();
    
  }
  //add an instance method
  Vue.prototype.$api= function () {
    // some logic ...
    api();
  }
}

function api(){
//code goes here
}
  

а затем в ваших файлах js просто импортируйте Vue и вызывайте Vue.api() .

например, в LogicService.js

 import Vue from "vue";
export default function(){
//call api
  Vue.api();
}
  

проблема с этим способом заключается в том, что вы можете получить доступ Vue.api только тогда, когда vue завершит установку (в большинстве случаев это не проблема).

второй способ, которым вы можете это сделать, — написать плагин таким образом

 export default function (Vue) {
  //add global method or property
  Vue.api= function () {
    // some logic ...
    api();
    
  }
  //add an instance method
  Vue.prototype.$api= function () {
    // some logic ...
    api();
  }
}

export function api(){
//code goes here
}
  

теперь плагин фактически независим от vue и может работать сам по себе без vue. например, теперь вы можете сделать это в LogicService.js

 import {api} from './http-transport.js'
api()