Vue 组件中的条件导入

Question

我有一个根实例，其中有几个 CustomVideo 组件（在一堆其他组件中）。 CustomVideo-组件实现了VideoJS，但并不是所有页面上都有CustomVideo-组件，所以我不想全局导入VideoJS。这是页面上组件的示例：

App.js
|
|-- CustomVideo
|-- FooComponent
|-- CustomVideo
|-- BarComponent
|-- CustomVideo

在 CustomVideo 的顶部，我导入了 VideoJS，如下所示：

import videojs from 'video.js';
import abLoopPlugin from 'videojs-abloop'


export default {
  name: "FeaturedVideoPlayer",
  props: {
    videoUrl: String
  }
  mounted() {
    let videoOptions = {
      sources: [
        {
          src: this.videoUrl,
          type: "video/mp4"
        }
      ],
      plugins: {
        abLoopPlugin: {
          'enabled': true
        }
      }
    };

    this.player = videojs(this.$refs.featuredVideoPlayer, videoOptions, function onPlayerReady() {});

  }

但是如果有多个 CustomVideo，那么我会收到一个控制台警告：

VIDEOJS: WARN: A plugin named "abLoopPlugin" already exists. You may want to avoid re-registering plugins!

我尝试研究有条件的导入，但似乎不是这样做的方法。

---

即使我尝试将其导入 app.js，即使我宁愿将其导入 CustomVideo，我也会收到另一个控制台错误：

尝试

import abLoopPlugin from 'videojs-abloop'
Vue.use( abLoopPlugin );

然后我得到错误：

Uncaught TypeError: Cannot read property 'registerPlugin' of undefined

---

如何确保一个插件只被注册一次？

Answer 1

尝试创建 abLoopPlugin 实例。我对 vue-i18n 和其他全局使用的插件采用了相同的方法。类似于：

import AbLoopPlugin from 'videojs-abloop'

Vue.use(AbLoopPlugin) // CHECK IF REGISTER PLUGIN ERROR PERSIST

const abLoopPlugin = new AbLoopPlugin({
   ---your settings---
})
export default abLoopPlugin

Answer 2

勾选videojs.getPlugins().abLoopPlugin

videojs.getPlugins() returns 所有已加载插件名称的符号 table。在将 abLoopPlugin 加载到您的组件之前，您可以简单地检查 abLoopPlugin 不在那个 table 中：

import videojs from 'video.js'

if (!videojs.getPlugins().abLoopPlugin) {
  abLoopPlugin(window, videojs)
}

等待 $nextTick 使用 ref

您会注意到您的视频最初在您指定的 <video> 元素中不可见。这是因为 ref 在 mounted().

中传递给 videojs 时未定义

ref docs状态：

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet!

解决办法是等到$nextTick():

async mounted() {
  // this.$refs.featuredVideoPlayer is undefined here
  await this.$nextTick()

  // this.$refs.featuredVideoPlayer is the <video> here
  this.player = videojs(this.$refs.featuredVideoPlayer)
}