fetchProfile.vue

<template>
  <div>
    <slot :response="response" :loading="loading"></slot>
  </div>
</template>

<script>
// require modules
const _ = require('lodash');
let host = require('../js/const').apiHost;

export default {
  name: "fetchProfile",
  data() {
    return {
      loading: true,
      response: '',
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
    jwt: function () {
      return this.$store.getters['User/jwt']
    },
  },
  methods: {
    getItems() {
      const vm = this;

      // console.log(host)

      if(vm.isDev) {
        host = require('../js/const').devApiHost;
      }
      // console.log(vm.isExperimental)

      let url = `${host}/api/users/me`;
      

      const jwt = vm.jwt;
      if(jwt === null) {
        vm.loading = false;
        vm.response = null;
        return
      }

      fetch(url, {
        method: 'GET',
        mode: 'cors',
        cache: 'no-cache',
        headers: {
          Authorization: `Bearer ${jwt}`
        }
      })
        .then(response => response.json())
        .then((response) => {
          // /* eslint-disable no-console */
          //console.log(response);

          setTimeout(() => {
            vm.loading = false;
            vm.response = response
          }, 10);
        });
    }
  },
  mounted() {
    const vm = this
    // /* eslint-disable no-console */
    // console.log(vm.locus);
    vm.getItems();
  },
}
</script>

<style scoped>

</style>