Importing Axios into Mixins VueJS

Question

Importing Axios into Mixins VueJS

Navigation

#1 by (3 votes)

1

Can I import Axios into Mixins ? I have a Rest API and am putting in a Mixin my GET code, but I use Axios for this. When I try to import Axios into Mixins , it 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.vue

<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 am creating simple variable with .js because I would not like to use

'import myMixins from ./myMixins'

in my .vue

Is there any way you can do this?

Thank you!

vue.js

asked by anonymous 27.09.2017 / 14:22

1 answer

How to publish a WebService using Visual Studio C #? How to return a vector in another vector in Java?

score 3 · Accepted Answer

The error you receive about import is related to your version of Node or the lack of a webpack.

Anyway what you want to do is possible, but you have to export something in MyMixins.js . And you really have to request the file whenever you want to add that mix.

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>