2

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

  1. EaselJS使用 HTML 画布和 2 个用于实验脚本和库的 div 创建
  2. created生命周期钩子：使用 （包含在主 HTML 文件中）加载EaselJS库PreloadJS
  3. 将EaselJSlib 文件存储在#creatjLibdiv中
  4. 然后它加载实验脚本文件并将它们存储在 #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生命周期挂钩中崩溃。

创建钩子时出错：“TypeError：无法读取未定义的属性‘observeArray’”

控制台日志

我尝试使用destroyedandbeforeDestroy生命周期挂钩来取消、删除、重置PreloadJS队列，但我尝试过的没有任何效果。该错误似乎发生在 Vue.js 的某个地方，但我不确定为什么或如何解决这个问题。我检查了清单 url，它指向正确的静态JSON清单文件。

有什么想法吗？我在这里错过了什么？任何建议/帮助将不胜感激

4

1 回答 1

3

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

createjs.LoadQueue您可以在钩子内部创建一个实例created()并将其保存到组件的某个内部属性中。一个常见的约定是使其类似于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
}
于 2017-07-18T17:57:56.777 回答