如何从Uppy的回调事件中访问"this“

Question

我正在使用Uppy组件库，在文档之后，我将它添加为一个计算属性来初始化它。

computed: {
    uppy: () => new Uppy({
        logger: Uppy.debugLogger
    }).use(AwsS3Multipart, {
        limit: 4,
        companionUrl: '/',
    }).on('complete', (result) => {
        this.testing = 'success';
        console.log('successful files:', result.successful);
        console.log('failed files:', result.failed);
    }),
}

我现在正试图通过使用Uppy的完全事件来更新Vue组件的数据，但是没有定义"this“。我不太清楚怎么从这里进入“这个”。

知道该怎么做吗？

更新

在发布这篇文章之后，我找到了一个可行的解决方案。我对这个解决方案犹豫不决，因为这看起来太容易了。

如果没有人提供更好的解决方案，我将添加这一点作为答案。

// Uppy Instance
uppy: function() {
    return new Uppy({
        logger: Uppy.debugLogger
    }).use(AwsS3Multipart, {
        limit: 4,
        companionUrl: '/',
    }).on('complete', (result) => {
        this.testing = 'success';
        console.log('successful files:', result.successful);
        console.log('failed files:', result.failed);
    })
},

Answer 1

通过跟踪Uppy并使用箭头函数实例化Uppy实例，this似乎不再引用Vue。这使得访问this.method()或this.variable等不再有效。

我的解决方案是将Uppy实例化从箭头函数更改为正则函数。我相信这会导致this引用全局实例，但我对this没有一个很好的理解，因此，请稍加考虑我所说的内容。

我改变了这个：

computed: {
    uppy: () => new Uppy()
}

对此：

computed: {
    uppy: function() { return new Uppy() }
}