如何在Vuex中存储Pixi实例并在Vue项目全局使用？

方案1：全局挂载到Vue原型 #

在Vue项目入口文件（如main.js）中创建Pixi实例后，直接挂载到Vue原型上：

import Vue from 'vue'
import * as PIXI from 'pixi.js'

// 初始化Pixi实例
const pixiApp = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(pixiApp.view)

// 挂载到Vue原型
Vue.prototype.$pixiApp = pixiApp

后续在任意组件内可直接通过this.$pixiApp访问实例：

// 组件内使用示例
mounted() {
  const testSprite = PIXI.Sprite.from('test.png')
  this.$pixiApp.stage.addChild(testSprite)
}

方案2：独立模块导出实例 #

创建单独的模块文件（如utils/pixiInstance.js），在其中初始化并导出Pixi实例：

import * as PIXI from 'pixi.js'

const pixiApp = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(pixiApp.view)

export default pixiApp

需要使用的组件或文件直接导入即可：

import pixiApp from '@/utils/pixiInstance.js'

// 使用实例示例
const graphics = new PIXI.Graphics()
graphics.beginFill(0xff0000)
graphics.drawRect(0, 0, 100, 100)
pixiApp.stage.addChild(graphics)

方案3：Vuex存储实例引用（无需序列化） #

若一定要用Vuex，直接存储实例引用即可——无需用JSON.stringify处理，因为Pixi实例包含DOM、Canvas上下文等不可序列化的属性，强行序列化会丢失关键信息或报错。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as PIXI from 'pixi.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    pixiApp: null
  },
  mutations: {
    SET_PIXI_APP(state, app) {
      state.pixiApp = app
    }
  },
  actions: {
    initPixi({ commit }) {
      const app = new PIXI.Application({ width: 800, height: 600 })
      document.body.appendChild(app.view)
      commit('SET_PIXI_APP', app)
    }
  }
})

组件内通过Vuex获取实例：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['pixiApp'])
  },
  mounted() {
    if (this.pixiApp) {
      // 执行实例相关操作
    }
  }
}

关键提醒 #

• Pixi实例属于包含复杂内部状态的对象，本身不支持JSON序列化，不要尝试用JSON.stringify处理后存入Vuex，这会导致实例功能失效。
• 全局挂载或独立模块的方式更简洁，适合单纯全局调用的场景；Vuex方式适合需要同步实例状态变更的场景。

内容的提问来源于stack exchange，提问作者oguzcan