ES 6 import Vue

Question

I created my service file like this:

import Vue from 'vue'

var service = {
    counter : 1,
    loadProducts : function(){
        return Vue.http.get('http://www.json-generator.com/api/json/get/cqLJAlYsPm?indent=2');
    }
}

export default service

and I have imported it in my single component

<!-- src/components/ProductList.vue -->
<template>
    <table class="table table-hover product-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="product in products" track-by="id">
                <td>{{product.about}}</td>
                <td>{{product.address}}</td>
                <td>{{product.age}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>    
    import service from './my-service.js'

export default {
    created: function(){
        service.counter++;
        console.log(service);
        console.log('created');

        service.loadProducts().then(response => {
            this.products = response.data;
        });

    },
  data () {
    return {
        products: []
    }
  }
}
</script>

Is this proper method to write API calls? If I import Vue in service file:

import Vue from 'vue'

will this be included in my js file again? So everytime I write import Vue the my JS file would keep bloating?

Answer 1

If I import Vue in service file [...] will this be included in my js file again? So everytime I write import Vue the my JS file would keep bloating?

If you are not code splitting, then no, the vue module will not be included multiple times in the same chunk, nor will that module be initialized every time it is imported. If you are code splitting, then you need to use the CommonsChunkPlugin to prevent duplication of the same module across multiple chunks (if that concerns you).