Как получить доступ к функции плагина VUE из импортированного модуля


Как получить доступ к функции плагина VUE из импортированного модуля

06.10.2020 09:23:30 Просмотров 36 Источник

Я разработал плагин для централизации HTTP-вызовов и должен получить доступ к его функции ($api) из импортированного модуля в компоненте. Прекрасно работает следующее: Плагин (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, который импортирует модуль компонент.Вью

import logic from "./LogicService.js";

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

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

У вопроса есть решение - Посмотреть?

Ответы - Как получить доступ к функции плагина VUE из импортированного модуля / How to access a VUE plugin function from an imported module

eli chen

07.10.2020 10:10:16

есть несколько способов сделать это. самый простой способ-просто импортировать 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()
Помочь в развитии проекта:
Закрыть X