Uncertain about the optimal approach, I am looking to create a component and leverage some object level variables. Consider the example below:
import Vue from "vue"
import * as paper from "paper"
export default Vue.extend({
template: `
<div class="chart-container" ref="chart-container">
<canvas ref="canvas"></canvas>
</div>
`,
mounted: function() {
this.$nextTick(function() {
let canvas = this.$refs["canvas"] as HTMLCanvasElement
let chartContainer = this.$refs["chart-container"] as HTMLDivElement
// Throws errors since there is no definition for the variable paperScope
this.paperScope = new paper.PaperScope()
this.paperScope.setup(canvas)
})
},
methods: {
resizeCanvas(): void {
let chartContainer = this.$refs["chart-container"] as HTMLDivElement
let width = chartContainer.clientWidth - 30;
let height = chartContainer.clientHeight - 30;
// Aim to access the class-level variable in declared methods
this.paperScope.view.viewSize = new paper.Size(width, height)
}
}
})
I wish to establish an object level variable paperScope that can be accessed across methods without storing it in data, as there is no need for vuejs monitoring. Is there a way similar to
this.$privateVariables["paperScope"] = paperScope
that can serve this purpose?
Currently contemplating creating a type definition that extends the vue one, incorporating something like $privateVariables. Interested to know if there is an existing or more efficient method to achieve what I am aiming for.