Share global variables between aspx and Vue pages

Question

Before anybody starts screaming at me for using global variables, I have a few things to say:

This is only for one variable and will only be used temporary (my estimates says that it will be gone within one year)
I'm open for suggestions on how to solve this a better way

Our project has a bit of a unusual setup. We have an old ASP.Net website, that we are slowly converting to VueJs, page by page. Due to this, we are using UMD

Currently Vue is used for the menu, showing content, etc. When showing an old aspx page, we are using iframe. My goal is for my Vue to be able to catch events thrown from the open aspx page

For this I thought the mitt emitter would be perfect for the job. I'm using it in my Vue project already

On the code side of things, I have the following:

I have a Toolbox.js file, where I try to keep my global variable

var emitter;

async function ClickFromOldPage()
{
    emitter.emit('test');
}

In mounted in my vue file (the first thing that opens) I'm setting the global variable

mounted()
{               
    window.emitter = window.mitt();
            
    window.emitter.on('test', this.Test);
},

And then I have an aspx page that calls ClickFromOldPage

Both the vue file and aspx file is loading Toolbox.js like this

From what I could gather around the net, this should do it, but emitter is undefined when calling Toolbox from the aspx page Another way was by using top to set/get variables, but this gives the same result

I also tried localStorage, but this can't handle complex objects like the emitter

The only other way to handle this challenge I can think of, is by using cookies or localStorage, where the aspx page writes 'Clicked' (or whatever), then have a function in Vue that checks for said data every second or so. This doesn't sound like a good solution, but the only solution I can come up with

Any other ideas?

Share global variables between aspx and Vue pages

0 Answers