Global variable in framework7 application

I created two custom functions in javascript.

var myDataKey;

app.on('jsonRepeaterLineClick', function (repeater, rowindex, key, data, target) {
    var x = Array.from(document.querySelectorAll('.item-json')).forEach(function(datakey){
        var myDataKey = key;
        console.log("key: " + key);
        console.log("myDataKey: " + myDataKey);
    });
});



$(document).on('page:init','.page[data-name="coupos_pro_cat"]', function (e, page) {
    var page = e.detail;
    console.log("key2: " + myDataKey);
});

myDataKey is set in first page and i want take it to another page.

I need var myDataKey in the second function. But if iam calling that, iam only getting:

variable [myDataKey] is undefined

Whats wrong?

Framework7 code get “obfuscated” when compiled for production. So your variables get renamed to shrink or minify the code. If you want to make a global variable, either put it in your store object or to do exactly what you are trying to do… attach it to the window object. So instead of var myDataKey; use window.myDataKey= null;

Hi Patron. I already tried this with “window.xx” but its still not working too.

instead of use window why don’t use app directly?

Like in app.js:
app.myDataKey = 'xx'; //instead of var myDataKey

In other page in script:

export default (props, {$f7}
    ) => {
   console.log($f7.myDataKey);
 //other code