如何构建 WebTorrent VueJS 组件？

【问题标题】：How would a WebTorrent VueJS component could be build?如何构建 WebTorrent VueJS 组件？
【发布时间】：2018-09-26 22:30:20
【问题描述】：

你好。鉴于 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 构建该架构/模式？任何见解，不胜感激

谢谢！

【问题讨论】：

标签： vue.js webtorrent

【解决方案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 需要）并且组件已被渲染，就会发生这种情况。

【讨论】：