0

Estou utilizando o Axios em um dos meus projetos com Vuejs, minha duvida está ligada diretamente a forma de import global do plugin. Atualmente estou fazendo assim:

Crie um arquivo /plugin/axios.js com este código:

import Vue from 'vue'
import Axios from 'axios'

Axios.defaults.baseURL = 'https://minha-api/'

Vue.use({
    install(Vue) {
        Vue.prototype.$http = Axios
    }
})

E no main.js fiz o import do arquivo acima.

Cheguei a pensar em ignorar o /plugins/axios.js e fazer o import diretório no main.js desta forma:

...
import Axios from 'axios'

Axios.defaults.baseURL = 'https://api.cartolafc.globo.com/'

Vue.prototype.$http = Axios
....

Se possível gostaria ainda de entender o que seria esse:

Vue.use({
    install(Vue) {

2 Respostas 2

3

A documentação explica como usar/criar plugins, mas basicamente funciona assim:

Para utilizar um plugin você precisa "instalar" ele na sua instância usando o método Vue.use(). Este método global vai chamar o método MeuPlugin.install() quando um plugin for instalado (veja no código fonte do Vue.js).

Então a explicação mais simples é que o método install seria como um callback, ou talvez um, "construtor" do plugin para que quando o programador decidir usá-lo na sua aplicação este método execute todas as preparações para que o plugin funcione corretamente quando for usado.


No código fonte do Vue.use() tem o código:

if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
      plugin.apply(null, args)
}

Ou seja, você pode passar um objeto que tenha o método install ou passar um classe que será instanciada.

Então para criar um plugin você poderia usar um objeto com uma propriedade install que seja uma função

let meu_plugin = {
    install: function(Vue) {
        // código do plugin
    }
}
Vue.use(meu_plugin)

Você também poderia usar diretamente dentro do Vue.use() como no exemplo que você postou:

Vue.use({
    install: function(Vue) {
        // código do plugin
    }
})
    
0

Dessa forma você estaria instalando o axios como um plugin. Facilitaria acessa-lo dentro de um component utilizando um this.$http.get() mas creio que para uma abordagem um pouco mais abrangente, utiliza-lo como um singleton simples seria melhor. Pense que você poderá precisar do axios dentro de uma action do Vuex por exemplo.

1
  • Como seria esse uso como singleton? 18/04/2019 às 0:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .