Call external JS prompt undefined in VUE

prompt undefined when calling external JS directly in methods method in VUE is not easy to use var variable, but if this method is placed in mui.ajax (); it works strangely for a long time hoping that God can help me solve

.
//JS
<script src="../js/InitDb.js"></script> 
 
//JS
var DB_NAME = "PDALUNBO";
var DB_VERSION = 20190101; //
var db;
//readwrite
var READ_WRITE = "readwrite";
//readwrite
var READ_ONLY = "readonly";

function initDb() {
    console.debug("initDb ...");
    var req = indexedDB.open(DB_NAME, DB_VERSION);
    req.onsuccess = function(evt) {
    db = evt.target.result;
    console.debug("initDb opened");
    };
    req.onerror = function(evt) {
    console.error("initDb error:", evt.target.errorCode || evt.target.error);
    };

    //,onupgradeneeded(onsuccess)
    req.onupgradeneeded = function(evt) {
    console.debug("initDb.onupgradeneeded");
    var db = evt.currentTarget.result;
    //ObjectStoreonupgradeneeded
    //
    if (!db.objectStoreNames.contains("users")) {
        var usersStore = db.createObjectStore("users", {
            keyPath: "PLANID"
        });
    }
    usersStore.createIndex("PROJDATE", "time", {
        unique: true
    });
   };
  }
 
 
 
 
 
 
 //VUE
 new Vue({
 el: "-sharpproduction",
 data: {
    GetTLPlanList: null
 },
 methods: {
    //   
    Get_TLPlanList: function() {
        var _this = this;
        document.getElementById("beginTime2").placeholder = getYDate();
        document.getElementById("overTime2").placeholder = getTDate();
        var beginTime = document.getElementById("beginTime2").value;
        var overTime = document.getElementById("overTime2").value;
        var workid = 0;
        var deptcode = plus.storage.getItem("dept_code");
        if (beginTime == "") {
            beginTime = getYDate();
        }
        if (overTime == "") {
            overTime = getTDate();
        }
        mui.ajax("http://", {
            data: {
                time_from: beginTime,
                time_to: overTime,
                work_id: workid,
                dept_code: deptcode
            },
            dataType: "json",
            type: "post",
            timeout: 50000,
            success: function(res) {
                //
                initDateFormat();
                var users = JSON.parse(res);
                for (i = 0; i < users.length; iPP) {
                    users[i].PROJDATE = getYear() + new Date(users[i].PROJDATE).format("MMddHHmm");
                }
                console.log(JSON.stringify(users));
                var tx = db.transaction("users", READ_WRITE);
                var store = tx.objectStore("users");
                var i = 0,
                    len = users.length;
                while (i < len) {
                    var req = store.put(users[iPP]);
                    req.onsuccess = function(evt) {
                        console.debug("");
                    };
                    req.onerror = function(evt) {
                        console.error(":", evt.target.errorCode || evt.target.error);
                    };
                }
                var index = store.index("PROJDATE");
                var request = index.openCursor(IDBKeyRange.bound(clearInput(beginTime) + "000000", clearInput(overTime) +
                    "235959", false, false));
                request.onsuccess = function(evt) {
                    var res = evt.target.result;
                    if (res) {
                        console.log(JSON.stringify(res.value));
                        res.continue();
                    }
                }
                request.onerror = function(evt) {

                }
                console.log("GetTLPlanList");
            },
            error: function() {
                console.log("GetTLPlanList");
            }
        });
    },
    //   MUI.AJAX  VUEundefined transaction
    Get_TLPlanListNonet: function() {
        var tx = db.transaction("users", READ_WRITE);
        var store = tx.objectStore("users");
        var index = store.index("PROJDATE");
        var request = index.openCursor(IDBKeyRange.bound(clearInput(beginTime) + "000000", clearInput(overTime) +
            "235959", false, false));
        request.onsuccess = function(evt) {
            var res = evt.target.result;
            if (res) {
                console.log(JSON.stringify(res.value));
                res.continue();
            }
        }
        request.onerror = function(evt) {

        }
        console.log("");
    }
},
mounted: function() {
    initDb(); // VUE 
                undefined transaction
    var nt = plus.networkinfo.getCurrentType(); //
    if (nt == "2" || nt == "3" || nt == "6") {
        this.Get_TLPlanList();
    }
    if (nt != "2" || nt != "3" || nt != "6") {
        this.Get_TLPlanListNonet();
    }
}

});


I find that the whole world seems to be unfriendly to IndexedDB, and it's time for self-question and answer again. This problem has been analyzed by me all afternoon. It is not because the internal JS of VUE cannot call the externally introduced JS, nor is it a problem introduced by ES5 ES6, but the order before and after the life loading cycle of VUE. The loading order of life cycle hooks is still quite chaotic, and it is not convenient to achieve the loading order through the life cycle alone. My code initDb () this method is not finished loading, but VUE has been preemptively loaded. So I couldn't find the locally stored transaction transaction, so I took out the initDb () method. Let it load before VUE loads. It's easy to use, though the solution is simple. But it's also a meaningful trick

.
Menu