Vuex Store + PixiJs 使用 Mounted 渲染太快？答案

【问题标题】：Vuex Store + PixiJs using Mounted to render too soon?Vuex Store + PixiJs 使用 Mounted 渲染太快？
【发布时间】：2020-12-14 11:58:37
【问题描述】：

如果我在代码上编辑，那么突然连接将在浏览器中呈现，但在浏览器中初始加载时，它们不显示，并且看起来数组 configConnections 未准备好/为空，所以我需要调用 drawPixi( ) 后来不知何故？也许使用 nexttick？还是我在这里遗漏了什么应该是异步的？

<template>
  <div class="connections">
    <canvas id="pixi"></canvas>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'

export default {
  name: 'ConnectionsLayer',
  computed: mapState({
    configConnections: (state) => state.configConnections,
  }),

  methods: {
    drawPixi() {
      var i
      var canvas = document.getElementById('pixi')
      const app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true,
        transparent: true,
        view: canvas,
      })

      let graphics = new PIXI.Graphics()
      graphics.lineStyle(8, 0xcab6ff)

      for (i = 0; i < Object.keys(this.configConnections).length; i++) {
        //start
        graphics.moveTo(
          this.configConnections[i].x_pos_start,
          this.configConnections[i].y_pos_start
        )
        //end
        graphics.lineTo(
          this.configConnections[i].x_pos_end,
          this.configConnections[i].y_pos_end
        )
      }
      app.stage.addChild(graphics)
    },
  },
  mounted() {
    this.drawPixi()
  },
}
</script>

【问题讨论】：

您可以尝试使用watcher并从Watcher触发drawPixi()函数
好的，我该如何查看我的 mapState 呢？
也许您可以从这个工作示例中找出一些解决方案？：codepen.io/AsaToBan/embed/…
谢谢你，这很好，与我的想法非常相似，所以这很好，但看起来一些更好的作品会更新并在这里发布答案

标签： vue.js vuex pixi.js

【解决方案1】：

  <div class="connections">
    <canvas ref="pixi" id="pixi"></canvas>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'

export default {
  name: 'ConnectionsLayer',
  computed: mapState({
    configConnections: (state) => state.configConnections,
  }),

  watch: {
    configConnections: {
      deep: true,

      handler() {
        this.drawPixi()
      },
    },
  },

  methods: {
    drawPixi() {
      var i
      this.canvas = this.$refs.pixi
      const stage = this.PIXIApp.stage
      let graphics = new PIXI.Graphics()
      graphics.lineStyle(8, 0xcab6ff)

      for (i = 0; i < Object.keys(this.configConnections).length; i++) {
        //start
        graphics.moveTo(
          this.configConnections[i].x_pos_start,
          this.configConnections[i].y_pos_start
        )
        //end
        graphics.lineTo(
          this.configConnections[i].x_pos_end,
          this.configConnections[i].y_pos_end
        )
      }
      for (var j = stage.children.length - 1; j >= 0; j--) {
        stage.removeChild(stage.children[j])
      }
      stage.addChild(graphics)
    },
  },
  mounted() {
    const canvas = this.$refs.pixi
    this.PIXIApp = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      antialias: true,
      transparent: true,
      view: canvas,
    })
    this.drawPixi()
  },
}

【讨论】：