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

我正在尝试创建一个

Vue.js

组件，它允许我加载（使用

prelojs

）并显示各种

EaselJS

画布实验。Vue.js组件：

<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>

使用HTML画布和实验脚本的2个div创建 和

EaselJS

库

created

lifecyclehook：使用

prelojs

加载

EaselJS

库 （包含在主HTML文件中）

将

EaselJS

lib文件存储在

#createjlib

div中

之后，它加载实验脚本文件并将其存储在

#游戏资产

以下是组件：

<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>

从“../../assets/list/games.js”导入{createjsList}
从“../../assets/conf.js”导入{manifests}
导出默认值{
道具：['id']，
数据（）{
返回{
游戏：createjsList[this.id]，
队列：新建createjs.LoadQueue（）
};
},
方法：{
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（“完成”，this.onGameAssetsLoaded）；
this.queue.on（“fileload”，this.onGameAssetLoaded）；
this.queue.loadManifest（manifest）；
},
onGameAssetLoaded（e）{
变量类型=e.item.type；
if（type==createjs.LoadQueue.CSS | | type==createjs.LoadQueue.JAVASCRIPT）{
document.getElementById（'gameAssets'）.appendChild（e.result）；
}
},
onGameAssetsLoaded（）{
console.log（“加载的资产”）；
}
},
创建（）{
var manifest=manifests.createjs；
this.queue.on（“完成”，this.onLibrariesLoaded）；
this.queue.loadManifest（manifest）；
console.log（'created'）；
}
}

问题 我的问题是这个过程只工作一次。我只能加载

EaselJS

库和实验文件一次，脚本得到正确执行，但一旦我导航（

vue router

，history mode）回家，然后返回实验，它甚至无法再次加载库，并在

创建的

生命周期挂钩中崩溃

创建的钩子中出错：“TypeError:无法读取属性'Observarray' “未定义的”

我尝试使用

destrocted

和

beforedostroy

生命周期挂钩来取消、删除、重置

prelojs

队列，但我尝试的都不起作用。这个错误似乎发生在Vue.js的某个地方，但我不知道为什么或者如何修复它。我已经检查了清单url，它指向正确的静态

JSON

manifest文件

---

知道发生了什么事吗？我错过了什么？任何建议/帮助都将不胜感激

这一行：

队列：new createjs.LoadQueue（）

可能是罪魁祸首。Vue.js要求其

数据

对象的所有属性都是基本值或普通对象

您可以在

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
}

---

哦，很好的回答，谢谢！我不知道普通对象约束。

prelojs

complete

事件对象似乎实际将队列引用存储在

currentTarget

属性中，因此我决定根本不存储任何引用。非常感谢：）