计算/异步数据获取

Question

我可以帮您翻译，以下是翻译结果：

我正在尝试创建简单的Vue + CouchDB应用程序。使用Vanilla JS可以正常工作，但是我无法通过promise或async函数将从数据库获取的数据传递给我的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实例中！

- pazzero

Answer 1

欢迎来到SO！

计算属性不应该是异步的。

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

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

对于你的情况，你需要做以下操作：

1. 将你的 tableData 转换为内部的 data，就像你的 tableHead 一样
2. 在 created 钩子中调用你的 couch.fetchData 函数
3. 在返回的 Promise 的 then 链中（或在等待之后），将你的 tableData 分配给结果
4. 在你的模板中使用 tableData（无需更改）

例如，请参阅Vue使用Axios消费API的食谱

- ghybs