如何构建WebTorrent VueJS组件？

Question

你好啊。给定webtorrent.io，我想建立一个VueJS组件，显示加载磁铁文件，以及状态，也当下载完成触发播放器。

Vuex Store是保存活动下载队列列表和数据流的好地方吗？

所有这些都可以通过webtorrent来实现。

var WebTorrent = require('webtorrent')

var client = new WebTorrent()

var magnetURI = 'magnet: ...'

client.add(magnetURI, { path: '/path/to/folder' }, function (torrent) {
  torrent.on('done', function () {
    console.log('torrent download finished')
  })
})

我该如何用VueJS构建架构/模式呢？任何见解，请参阅

谢谢!

Answer 1

我会回答的，因为我找到了解决方案。那么，如果社区希望删除它，那也没关系。

基本上我所做的就是等待一个组件被挂载。

AComponent.Vue内幕

<template>
  <keep-alive>
     <!-- HTML binding webtorrent client data -->
  </keep-alive>
</template>

<script>
  export default {
    mounted() {
      var client = WebTorrent()
    }
  }
</script>

为什么这能达到我想要的效果？

当我呈现另一个模板并返回到这个模板时，

• keep alive会保持DOM各部分处于活动状态(就好像下载队列位于小部件、模式或其他需要保持活动的视图中一样)。
• 已装载，它是组件生命周期挂钩(https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)的一部分，并且在DOM已被提升、窗口存在(WebTorrent需要)以及组件已呈现时发生。