fetchUpdateItems.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: "fetchUpdateItems",
  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)
      const qs = require('qs');
      const query = qs.stringify({
        sort: ['id:asc'],
        pagination: {
          pageSize: 1000,
          page: 1,
        },
      }, {
        encodeValuesOnly: true,
      });

      let url = `${host}/api/update-items?${query}`;

      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>