Событие Vue.js Emit от Сервиса

Question

Мне было интересно, как я могу отправить событие компоненту из файла .js (класс, который предоставляет службу загрузки файлов). Моя идея - генерировать четыре события для элемента пользовательского интерфейса прогресса.

Файл моей службы .js имеет вид:

import Vue from 'vue';

export const UploaderService = new Vue({
 methods: {
    orchestrateDataPublication() {
        return new Promise((resolve, reject) => {
            if (this.checkRequiredData()) {
                // emit 25% done
                this._getSignedUrl().then(signedUrlResponse => {
                 // emit 50% done
              this._uploadDataset(signedUrlResponse).then(uploadResponse => {

и т. Д.

Это импортируется внутри компонента Vue:

<script>
import {UploaderService} from '../service/uploaderService.js'
export default {
        upload () {
        this.$refs['datasetForm'].validate((valid) => {
            if (valid) {
                UploaderService.orchestrateDataPublication().then((response) => {
                    this.$emit(response.type, response.data)
                }, (err) => {
                    this.$emit(err.type, err.data)
                })
            } else {
                this.$emit('appInforms', ' -PLEASE, check all your inputs- ')
            }
        })
    }

здесь загрузка использует orchestrateDataPublication в качестве обещания, но мне нужно как-то генерировать события. Это возможно?

Answer 1

Поскольку UploaderService сам по себе является экземпляром Vue, вы можете использовать его $on -метод для прослушивания событий и $emit -метод для отправки событий , После завершения загрузки вы можете использовать $off, чтобы остановить прослушивание событий прогресса.

В upload() установите прослушиватель событий для события, которое мы будем называть «прогресс», затем вызовите UploaderService.orchestrateDataPublication() и прекратите прослушивание событий прогресса в обратном вызове then:

upload() {
  UploaderService.$on('progress', progress => console.log({ progress }));

  UploaderService.orchestrateDataPublication().then(message => {
    console.log({ message });
    UploaderService.$off('progress');
  });
}

В UploaderService.orchestrateDataPublication(), генерировать события прогресса, как это:

this.$emit('progress', 0.75); // 75% complete

демо

Примечание. Если ваш проект поддерживает ES2017, вы можете использовать async / await для уменьшения вложенности обратного вызова, как показано в этом codesandbox .