我的indexedDB中的console.log起作用并返回我想要的结果；当前在商店中的对象数组。所以我的代码是正确的。我将使用此信息来构建表。但是，在Vue中，它返回undefined。我正在尝试将Vue中的Leagues数组设置为等于indexedDB给出的结果数组，但是它返回未定义的值。
这是Vue中的代码：
<script>
import * as db from "../db/db.js";
export default {
name: "leaguesTable",
data: function() {
return {
leagues: []
};
},
created: function() {
this.leagues = db.getAllInStore("meta", "leagues");
console.log(this.leagues);
}
};
</script>
这是我的indexedDB代码：
function getAllInStore(dbName, storeName) {
let db;
var request = indexedDB.open(dbName, 1);
request.onerror = function(event) {
alert("Database error" + event.target.errorCode);
};
request.onsuccess = function(event) {
db = event.target.result;
let tx = db.transaction(storeName, "readonly");
tx.onerror = function(event) {
alert("Transaction error" + event.target.errorCode);
};
let store = tx.objectStore(storeName);
let result = store.getAll();
tx.oncomplete = function() {
alert("This should work");
console.log(result.result);
return result.result;
};
};
}
在创建的挂钩中，您需要确保从db.getAllInStore返回一个值，以便this.leagues假定该值。
接下来，在getAllInStore函数中，result.result从事务返回，但不在onComplete或封闭的getAllInStore函数之内。
由于数据库使用事件挂钩，例如onError和onComplete，所以返回请求不会给您提供对数据库的调用结果。为了在javascript中返回异步操作的值，通常使用回调或Promise。下面的示例使用了Promise解决问题。
Vue JS：
<script>
import * as db from "../db/db.js";
export default {
name: "leaguesTable",
data: function() {
return {
leagues: []
};
},
// async is necessary to use await
created: async function() {
// await is es2016 syntactic sugar for retrieving the value of a promise
this.leagues = await db.getAllInStore("meta", "leagues");
console.log(this.leagues);
}
};
</script>
IndexDB：
function getAllInStore(dbName, storeName) {
// resolve param is a function that signifies a successful operation
// reject param is a function that should be called whenever a check or error occurs
return new Promise((resolve, reject) => {
let db;
let request = indexedDB.open(dbName, 1);
request.onerror = (event) => reject(event);
request.onsuccess = (event) => {
db = event.target.result;
let tx = db.transaction(storeName, "readonly");
request.onerror = (event) => reject(event);
let store = tx.objectStore(storeName);
let result = store.getAll();
tx.oncomplete = (result) => resolve(result.result);
};
});
}
进一步阅读：