Learn WebAssembly

Component state

The following code initializes the local state in the data() function for our component:

export default {  data() {    return {      instance: null,      bounds: { width: 800, height: 592 },      rect: { width: 200, height: 120 },      speed: 5    };  },  ...

Although the bounds and rect properties never change, we defined them in the local state to keep all the data used by the component in a single location. The speed property dictates how quickly the spaceship moves across the <canvas> and has a range of 1 to 10. The instance property is initialized to null, but will be used to access the compiled Wasm module's exported functions. Let's move on to the Wasm initialization code that compiles the Wasm file and populates the <canvas>.