Как получить доступ к статусу выгрузки файла в Vue.js + axios, с другого компонента?

Question

[Виталий]

Есть у меня сервис компонент для работы с api (ApiManager.js), в нем есть метод для выгрузки файлов:

uploadImage(imagFormData) {
    return axios.post('https://apiurl/image', imagFormData, {
      headers: {
        "Authorization": "Client-ID"
      },
      onUploadProgress: uploadedEvent => {
        console.log('Upload proccess -> ', Math.round(uploadedEvent.loaded / uploadedEvent.total * 100) , '%' )
      }
    })
      .then(response => {
        console.log('uploaded resp ---> ', response);
      })
  }

И есть компонент UploadImageComponent.vue в котором вызывается этот метод:

import ApiManager from '@/services/ApiManager'

ApiManager.uploadImage(imagFormData).then(response =>{
   ...
})

Как с такой архитектурой в компоненте UploadImageComponent.vue получить доступ к статусу выгрузки?

Comments

[alex]

есть же vuex

Answer 1

[alex]

onUploadProgress({loaded, total}) {
  const uploadProgress = Math.round(loaded / total * 100)
  
  store.commit('uploader/setProgress', uploadProgress)
}

export const uploader = {
  namespaced: true,
  state: {
    progress: 0
  },
  mutations: {
    setProgress(state, progress) {
      state.progress = progress
    }
  }
}

computed: {
  ...mapState('uploader', [
    'progress'
  ])
}

<template>
  <div>{{progress}}%</div>
</template>

Answer 2

[Nikita Dergachov]

Можно бросить событие и обработать его