Import Axios in Mixins Vuejs

Question

Is it possible I import the Axios no Mixins? I have a Rest API and am putting in a Mixin my code of GET, but I use Axios for that. When I try to import the Axios within the Mixins, he returns me:

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.

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

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

What am I doing wrong? I’m creating simple variable with . js because I wouldn’t want to use

`import myMixins from ./myMixins`

in my .see

There’s some way to do it?

Thank you!

Answer 1

The mistake you get about the import I believe it is related to your version of Node or the lack of compiler (webpack).

Anyway what you want to do is possible, but you have to export something in the MyMixins.js. And you really need to require the file whenever you want to add that 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.

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

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