如何将数据从 Dexie 同步传递到 Vue？答案

【问题标题】：How to pass data from Dexie to Vue synchronously?如何将数据从 Dexie 同步传递到 Vue？
【发布时间】：2017-07-17 11:56:04
【问题描述】：

事实上，我正在使用 Dexie + VueJs，并且我正在打印一个包含记录列表的表格，以及一个用于计算相关记录的附加字段，但是，我不知道如何做到这一点一种简洁的方式。

我想做的是：

var vueElement = new Vue({
el: '#myElement',
data: {
    states: []
},
computed: {
    cities: function (s) {
        return db.cities.where('stateId').equals(s.id).count(); // How can I do this?
    }
}
});
// Initialize states in vue object
db.states.toArray().then(function (arr) {
    vueElement.states = arr;
});

【问题讨论】：

抱歉不熟悉 dexie，db.cities... 是否返回承诺？
尝试使用methods 而不是computed 属性。
@Austio 是的，它返回一个 Promise。

标签： indexeddb vuejs2 vue.js dexie

【解决方案1】：

因为大多数（如果不是所有）dexie 操作都是异步运行的，因此您需要先执行 dexie 异步操作，然后（使用 dexie 返回的数据初始化 vue 组件）。

或者您可以尝试在没有数据的情况下初始化 vue 组件，并根据您的用例在创建/安装时，从数据库请求数据并更新您的状态。

希望对你有帮助

【讨论】：

这种方法的问题是 Vue 模板不会渲染来自 Dexie 的更新