Although I've searched through similar topics, none of the solutions seem to fix my issue. I've been attempting to integrate Three.js with Vue3 (+Vuex). I carefully followed this tutorial: and it works perfectly on that site. However, when implementing the same code in my project, I encounter the following error:
Uncaught (in promise) Error: [vuex] do not mutate vuex store state outside mutation handlers.I could not identify any part of the code where the state is mutated outside a mutation handler. The reason behind this error eludes me. Could it be related to Vue3 itself? It's possible that the tutorial application was built using Vue2, which might be causing compatibility issues.
Below you can find my code. I apologize if it seems lengthy, but I hope it assists in pinpointing the root cause. Additionally, I have provided a reproducible example: https://codesandbox.io/s/black-microservice-y2jo6?file=/src/components/BaseModel.vue
BaseModel.vue
<template>
<div class="viewport"></div>
</template>
<script>
import { mapMutations, mapActions } from 'vuex'
export default {
name: 'BaseModel',
components: {
},
data() {
return {
height: 0
};
},
methods: {
...mapMutations(["RESIZE"]),
...mapActions(["INIT", "ANIMATE"])
},
mounted() {
this.INIT({
width: this.$el.offsetWidth,
width: this.$el.offsetHeight,
el: this.$el
})
.then(() => {
this.ANIMATE();
window.addEventListener("resize", () => {
this.RESIZE({
width: this.$el.offsetWidth,
height: this.$el.offsetHeight
});
}, true);
});
}
}
</script>
<style scoped>
.viewport {
height: 100%;
width: 100%;
}
</style>
store.js
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
import {
Scene,
PerspectiveCamera,
WebGLRenderer,
Color,
FogExp2,
CylinderBufferGeometry,
MeshPhongMaterial,
Mesh,
DirectionalLight,
AmbientLight,
} from 'three'
const state = {
width: 0,
height: 0,
camera: null,
controls: null,
scene: null,
renderer: null,
pyramids: []
};
// Mutation functions
const mutations = {
...
};
// Action functions
const actions = {
...
}
export default {
state,
mutations,
actions
};