VUE中调用外部JS提示undefined

Question

VUE中methods方法里直接调用外部的JS 不好用var变量的时候就提示undefined 但是如果这个方法放在mui.ajax();就好用很奇怪坑了好久希望大神能帮我解决

//这是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;
    //ObjectStore必须在onupgradeneeded里创建，其他地方将会创建失败
    //优化一下先判断有没有这个数据库然后在创建
    if (!db.objectStoreNames.contains('users')) {
        var usersStore = db.createObjectStore("users", {
            keyPath: "PLANID"
        });
    }
    usersStore.createIndex("PROJDATE", "time", {
        unique: true
    });
   };
  }
 
 
 
 
 
 
 //这是页面的VUE
 new Vue({
 el: '#production',
 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; i++) {
                    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[i++]);
                    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  VUE就提示我undefined 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();
    }
}

});

Answer 1

我发现整个世界对IndexedDB都好像不太友好，又到了自问自答时间。这个问题经过我一下午的分析。并不是因为VUE内部JS调用不到外部引入的JS 也不是什么ES5 ES6什么引入的问题 而是VUE这个生命加载周期的前后顺序。生命周期钩子的加载顺序还是比较混乱的，单独通过生命周期想做到加载顺序的前后不太方便。我这个代码initDb()这个方法没加载完毕 但是VUE已经抢先加载了。所以会导致我找不到本地存储的事务transaction 所以我就将initDb()这个方法 拿了出来。让它在VUE加载之前加载。就好用了，虽然解决方式挺简单的。但是也算一个有意义的坑吧