无法使用 PreloadJS 和 Vue.js 多次加载资产

Question

我正在尝试创建一个 Vue.js 组件，它允许我加载（使用 PreloadJS）并显示各种 EaselJS canvas 实验。 Vue.js 分量：

Gets created with a HTML canvas and 2 divs for experiment scripts 和 EaselJS 图书馆
created 生命周期挂钩：使用 PreloadJS 加载 EaselJS 库（包含在主 HTML 文件中）
将 EaselJS lib 文件存储在 #creatjLib div
之后加载实验脚本文件并将它们存储在 #gameAssets

组件如下：

<template>
  <div class="fullscreen">
    <canvas id="canvas" class="fill"></canvas>
    <div id="createjsLib" class="hidden"></div>
    <div id="gameAssets" class="hidden"></div>
  </div>
</template>

<script>
  import {createjsList} from '../../assets/lists/games.js'
  import {manifests} from '../../assets/conf.js'

  export default {
    props: ['id'],
    data() {
      return {
        game: createjsList[this.id],
        queue: new createjs.LoadQueue()
      };
    },
    methods: {
      onLibrariesLoaded() {
        var lib = this.queue.getResult("EaselJS");
        var libCont = document.getElementById("createjsLib");
        libCont.innerHTML = "";
        libCont.appendChild(lib);

        document.getElementById('gameAssets').innerHTML = "";
        var manifest = (this.game.manifest) ? this.game.manifest : '/static/games/' + this.id + '/manifest.json';
        this.queue = new createjs.LoadQueue();
        this.queue.on("complete", this.onGameAssetsLoaded);
        this.queue.on("fileload", this.onGameAssetLoaded);
        this.queue.loadManifest(manifest);
      },
      onGameAssetLoaded(e) {
        var type = e.item.type;
        if (type == createjs.LoadQueue.CSS || type == createjs.LoadQueue.JAVASCRIPT) {
          document.getElementById('gameAssets').appendChild(e.result);
        }
      },
      onGameAssetsLoaded() {
        console.log('Assets Loaded');
      }
    },
    created() {
      var manifest = manifests.createjs;
      this.queue.on("complete", this.onLibrariesLoaded);
      this.queue.loadManifest(manifest);
      console.log('created');
    }
  }
</script>

问题

我的问题是这个过程只能运行一次。我只能加载 EaselJS 库和实验文件一次，脚本可以正确执行，但是一旦我导航（vue-router，历史模式）回家，然后回到实验，它甚至无法加载库再次在 created 生命周期挂钩中崩溃。

Error in created hook: "TypeError: Cannot read property 'observeArray' of undefined"

我尝试使用 destroyed 和 beforeDestroy 生命周期挂钩来取消、删除、重置 PreloadJS 队列，但我尝试过的都不起作用。该错误似乎发生在 Vue.js 的某处，但我不确定为什么或如何解决此问题。我检查了清单 url，它指向正确的静态 JSON 清单文件。

知道发生了什么事吗？我在这里错过了什么？任何 advice/help 将不胜感激

Answer 1

这一行：queue: new createjs.LoadQueue() 可能是罪魁祸首。 Vue.js 要求其 data 对象的所有属性都是原始值或普通对象。

您可以在 created() 挂钩内创建 createjs.LoadQueue 的实例，并将其保存到组件上的某个内部属性。一个常见的约定是使其类似于 this.$createjsQueue。由你决定。

data() {
    return {
        game: createjsList[this.id],
        queue: null
    }
},
created() {
    this.$createJsQueue = new createjs.LoadQueue()

    // Expose some internal value of the instance
    this.queue = this.$createJsQueue._queue
}

无法使用 PreloadJS 和 Vue.js 多次加载资产

Cannot load assets more than once with PreloadJS and Vue.js

javascript

vue.js

vuejs2

createjs

preloadjs

问题