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

Posted 2023-02-23

【中文标题】从 indexedDB 在 Vue 中返回未定义的数组

【英文标题】：Array returning undefined in Vue from indexedDB

【发布时间】：2020-08-15 05:50:16

【问题描述】：

我的 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;
    ;
  ;

【参考方案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

【讨论】：

@Ikroneman 谢谢。这行得通。我唯一需要改变的是 tx.oncomplete = () => resolve(result.result);当我将结果放在括号中时，eslint 给了我一个 no-unused-var 错误。删除它修复它，现在它返回我想要的。非常感谢