1

Tem como eu importar o Axios no Mixins? Eu tenho uma Rest API e estou colocando em um Mixin meu código de GET, mas eu utilizo Axios para isso. Quando eu tento importar o Axios dentro do Mixins, ele me retorna:

Uncaught SyntaxError: Unexpected token import at MyMixins.js:1

MyMixins.js

import axios from 'axios'

let getMixins = {
    created() {
        axios.get(`https://api.myjson.com/bins/17rqo1`)
            .then(response => {
                console.log( response )
            })
            .catch(e => {
                // Errors
            })
    }
}

List.vue

<template>
   <h1> Test Mixins <h1>
</template>

<script>
    import axios from 'axios'
    export default {
        data: () => ({
            dataItem: [],
            errors: []
        }),
        mixins: [getListagem]
    }
</script>

O que estou fazendo de errado? Eu estou criando váriavel simples com .js porque eu não gostaria de usar

`import myMixins from ./myMixins`

nos meus .vue

Tem algum jeito de fazer isso?

Obrigado!

1 Resposta 1

3

O erro que recebes sobre o import creio estar relacionado com a tua versão do Node ou pela falta de compilador (webpack).

De qualquer maneira o que queres fazer é possivel, mas tens de exportar algo no MyMixins.js. E tens mesmo de requerir o ficheiro sempre que quiseres adicionar esse mixin.

MyMixins.js

import axios from 'axios'

export default const getMixins = {
    created() {
        axios.get(`https://api.myjson.com/bins/17rqo1`)
            .then(response => {
                console.log( response )
            })
            .catch(e => {
                // Errors
            })
    }
}

List.vue

<template>
   <h1> Test Mixins <h1>
</template>

<script>
    import axios from 'axios'
    import getListagem from './MyMixins'
    export default {
        data: () => ({
            dataItem: [],
            errors: []
        }),
        mixins: [getListagem]
    }
</script>
6
  • Então Sergio, assim eu sei que funciona, porque passaria pelo meu webpack, não tem como eu usar um Mixins sem usar o import getListagem from './MyMixins' nos meus .vue? Porque futuramente eu terei meus .vue em pasta dentro de pasta, aí vai ficar difícil ficar mapeando por " ../../../MyMixins " . Entende? Obrigado!
    – Jackson
    27/09/2017 às 12:31
  • 1
    Jackson, é mesmo assim, tens de usar caminhos de pastas ../../. Podes usar ... getListagem em vêz de mixins: [getListagem]mas para importares esse objeto para o ficheiro tens de usar import ou require.
    – Sergio
    27/09/2017 às 12:37
  • Entendi! Tem como eu deixar esse Mixin global? Onde eu possa acessar ele de qualquer .vue sem utilizar import?
    – Jackson
    27/09/2017 às 12:39
  • 1
    @Jackson há uma maneira de adicionar mixins globalmente vuejs.org/v2/guide/mixins.html#Global-Mixin mas não é 100% o que queres, pois só adiciona métodos não corre cada created
    – Sergio
    27/09/2017 às 12:49
  • 1
    Hmm entendi. Vou dar uma estudada nisso. De qualquer maneira, me ajudou bastante! Obrigado!! =)
    – Jackson
    27/09/2017 às 13:00

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 .