计算/异步数据获取

我正在尝试创建简单的 Vue + CouchDB 应用程序。使用 Vanilla JS 可以正常工作，但我无法通过 Promise 或异步函数从数据库获取数据到我的 vue 实例。这是我的代码：

app.html

<div id="vue-app">
  <table>
    <thead>
      <tr>
        <th>{{ tableHead.name }}</th>
        <th>{{ tableHead.lastname }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="data in tableData">
        <td>{{ data.name }}</td>
        <td>{{ data.lastname }}</td>
      </tr>
    </tbody>
  </table>
</div>

app.js

const db = new PouchDB('testdb')

const couch = {
  fetchData: async function () {
    var dbData = await db.allDocs({
        include_docs: true,
        descending: true
    }).then(function (result) {
        var objects = {}
        result.rows.forEach(function (data) {
            objects[data.id] = data.doc
        })
        return objects
    }).catch(function(err) {        
        return err
    })
    return dbData
  }
}

var app = new Vue({
    el: '#vue-app',
    data: {
        tableHead: {
            name: 'Name',
            lastname: 'Lastname'
        }
    },
    computed: {
        async tableData () {
            var dbData = await fetchData()
            return dbData
        }
    }
})

希望您能教我将数据获取到 Vue 实例的正确方法！

欢迎来到SO！

计算属性并不意味着是异步的。

解决数据异步检索的常见模式是：

1. 使用内部data占位符
2. 在组件生命周期钩子上启动异步请求created or mounted
3. 请求成功后，更新内部data与新内容。
4. 使用内部data在你的模板中。

就您而言，您会：

1. 转动你的tableData进入内部data， 像你的tableHead
2. 致电您的couch.fetchData函数于created hook.
3. 在函数返回的Promise中then链（或等待后），分配您的tableData结果
4. Use tableData在您的模板中（无需更改）

例如，参见 Vue使用 Axios 使用 API 的食谱 https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html