Question

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

使用HTML画布和实验脚本的2个div创建和EaselJS库
created生命周期钩子：使用EaselJS加载PreloadJS库（包含在主HTML文件中）
在EaselJS div

#creatjLib

然后加载实验脚本文件并将其存储 #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生命周期钩子中崩溃。

创建钩子时出错：＆＃34; TypeError：无法读取属性＆＃39; observeArray＆＃39; 未定义＆＃34;

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

任何想法是怎么回事？我错过了什么？任何建议/帮助将不胜感激

Answer 1

这一行：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
}

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

问题

1 个答案: