It seems that currently, the context of this has not been defined yet.
This is due to how the code has been written. The component instance does exist and can be accessed. It is commonly used to retrieve prop values for setting initial data properties.
An example from the documentation illustrates this concept:
https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
export default {
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
}
The reason your code may not be working is likely because you are using an arrow function. By making a slight adjustment as shown below, this will become accessible:
export default {
data () {
return {
state: new InitialState(this),
query: new QueryController(this)
}
}
}
Refer to this note as well:
https://v2.vuejs.org/v2/api/#data
Note that when using an arrow function with the data property, this will not refer to the component’s instance directly. You can still access the instance as the first argument of the function.
In regards to your question about utilizing classes like this in Vue...
While it might not be the recommended approach, it is possible to make them work as long as you comprehend their limitations. Understanding how Vue reactivity functions, especially the property rewriting aspect, is crucial to effectively use classes like this. Ensure that any reactive properties are exposed as object properties so Vue can manage them accordingly.
If these objects do not require reactivity, avoid placing them in data. Instead, consider defining properties within the created hook to prevent unnecessary reactive handling. As long as they remain as instance properties, they will still be accessible in templates without the need for data.