从 indexedDB 在 Vue 中返回未定义的数组

Question

我的 indexedDB 中的 console.log 工作并返回我想要的结果；当前在商店中的一组对象。所以我的代码是正确的。我将使用这些信息来构建一个表。然而，在 Vue 中它返回 undefined。我正在尝试将 Vue 中的联赛数组设置为等于 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;
    };
  };
}

Answer 1

在您创建的挂钩中，您需要确保从db.getAllInStore 返回一个值，以便this.leagues 假定该值。

接下来，在getAllInStore 函数中，result.result 从事务中返回，但不在onComplete 或封闭的getAllInStore 函数中。

由于数据库使用 onError 和 onComplete 等事件挂钩，返回请求不会给您调用数据库的结果。为了在 javascript 中返回异步操作的值，通常使用回调或承诺。下面的示例使用 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>

索引数据库：

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);
      };
  });
}

进一步阅读：

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises