Vue3 和移相器，有时会加载画布

问题描述

我正在尝试使用 typescript 将移相器库与 Vue3 结合使用。

问题是我一直在遵循 ion-phaser https://github.com/proyecto26/ion-phaser 的说明，并且自从我使用打字稿以来一直在改变一些东西。我面临的问题是离子移相器并不总是加载移相器画布。

如果有人能指出我正确的方向，我将不胜感激，因为我很困惑。

我的 App.vue 文件是

<template>
    <SnakeGame/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import SnakeGame from "../components/SnakeGame.vue";


export default defineComponent({
  name: 'App',components: {
    SnakeGame
  }
});
</script>

我的 main.ts


import {Component,createApp} from 'vue'
import { defineCustomElements as defineIonPhaser } from '@ion-phaser/core/loader'
import App from './App.vue'
import store from './store'

// Bind the IonPhaser custom element to the window object
defineIonPhaser(window).catch((e) => console.log(e))
const app : Component = createApp(App)
app.use(store).mount('#app');

这是我的游戏组件

<template>
  <div class="App">
    <header class="App-header">
      <template v-if="!initialize">
        <img src="../assets/logo.png" class="App-logo" alt="logo" />
        <div @click="initializeGame" class="flex">
          <a href="#1" class="bttn">Initialize</a>
        </div>
      </template>
      <ion-phaser
          v-bind:game.prop="game"
          v-bind:initialize.prop="initialize"
      />
    </header>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import config from "../phaser/config";
import Game  from "../phaser/scenes/gameScene"


export default defineComponent({
  name: 'SnakeGame',data() {
    return {
      initialize : false,game: {
          ...config,scene: Game
          },};
  },methods : {
    initializeGame() {
      this.initialize = true
    },}
});
</script>

但我很困惑，因为我没有在控制台中收到任何错误，有时当我更改代码时，它会突然加载并且其他离子移相器组件未初始化。

当 ion-phaser 加载时，html 如下所示：

通常发生的是：

我很困惑，我不确定我是不是在做一些明显的事情，或者我不明白为什么有时会加载。

我尝试使用 Vuex 存储更改传递 ion-phaser 状态的方式，但问题并没有消失。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

phaser-framework typescript typescript typescript vuejs3